Absolutes Positionierungslayout mit 100 % Containerhöhe_CSS/HTML

Containerhöhe 100 % ist eine häufig verwendete Anforderung, die von jedem Container erreicht werden kann und keine Verschachtelungsbeziehungen erfordert.

Betrachten Sie den Körper als Behälter und als obere Beschriftung des internen Objekts. Es ist wichtig, seine Höhe auf 100 % einzustellen.

Das einfachste Beispiel

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* Auch HTML für FF-Kompatibilität festlegen */
#box_2 { Höhe:100 %; Hintergrund:#000;}

Überlappender Positionierungseffekt

#box_1 { position:absolute; left:0; width:100%; absolut; links:0; Breite:100%; Hintergrund:#000;
Vertikaler relativer Höheneffekt

#box_1 { position:absolute; left:0; width:100%; height:30%;🎜>#box_2 { position:absolute; links:0; oben:30%; Höhe:70%; z-index:1;}

Horizontaler relativer Breiteneffekt

#box_1 { position:absolute; left:0; width:30%; height:100%;🎜>#box_2 { position:absolute; oben:0; rechts:0; Höhe:100%; z-index:1;}

Dieses Layout erfordert kein Float und es gibt viele Variationen:

1, N-Spalten-Layout
2, N-Zeilen-Layout

3, N-Spalten- und N-Zeilen-Kreuzlayout

Es ist zu beachten, dass beim Durchsuchen der Seite „Container mit relativer Größe“ in FF die Containergröße in Echtzeit angepasst wird, wenn die Fenstergröße angepasst wird, während IE erst nach der Anpassung des Fensters wirksam wird.

IE5.0/IE5.5/IE6.0 und FF1.5 getestet bestanden