Warum passiert das? HTML Fensterbreite

Question

Ich experimentiere mit HTML Markup und verschiedenen Layouts. Ich bin auf dieses JSFiddle gestoßen: http://jsfiddle.net/vLJAq/15/ mit dem ich herumgespielt und ein bisschen gezwitschert habe. Eine Sache, die ich nicht verstehe, ist, warum verschwindet grüne Box, wenn Sie die Fensterbreite kleiner machen?

Der Code für die grüne Box ist wie folgt:

Dank

.percent { 
    width:calc((100% - 400px)/1); 
    background: lightgreen; 
    border:1px solid grey; 
} 

.

Answer 1

Die .percent verschwindet, weil die Breite des Fensters niedriger als 400px ist. Die Breite wird berechnet durch die volle tatsächliche Breite des Fensters abzüglich der definierten 400px, so dass der minimale Platz zum Anzeigen der .percent401px ist.

Die .percent zeigt die Breite über 400px. Wenn Ihre Breite der Fenster 410px ist, hat die .percent eine Breite von 10px.