20.11.2010
Division - Höhe 100% browserunabhängig mit CSS
In Browsern werden Höhenangaben zu Divisions mittels CSS unterschiedlich interpretiert. Im folgenden Beispiel wird eine Möglichkeit aufgezeigt, mit der Sie browserunabhängig eine Division auf eine Höhe von 100% des sichtbaren Bereiches setzen können.
Als Basis, damit sich eine Division über die gesamte Bildschirmhöhe erstreckt, muss das Elternelement eine prozentuale Höhenangabe haben. Ist dies nicht der Fall, endet die Division in der Regel mit dem Textende. Dieses Verhalten würde der Angabe height:auto entsprechen.
html, body {
height:100%;
}
height:100%;
}
Hier sind die notwendigen Angaben, um die Höhe der Division browserübergreifend auf die gesamte Höhe des Browserfensters, d.h. 100% zu setzen.
#divBsp {
min-height: 100%;
height:auto !important;
height:100%;
}
min-height: 100%;
height:auto !important;
height:100%;
}
Erläuterung der CSS-Angaben:
- die Angaben min-height:100% und height:auto werden von modernen Browsern korrekt interpretiert
- die Angabe height:100% wird vom Internet-Explorer interpretiert
- !important bewirkt, dass die Höhenangabe nicht durch nachfolgende Höhenangaben überschrieben wird.
- und hier ist das Ergebnis