DIV-Container über volle Höhe (height: 100%)

Ab und zu verlangt ein Web Design (Layout) bei der Umsetzung, dass ein Bereich, wie zum Beispiel der Contentbereich, über die volle Höhe der Auflösung geht. Hat der Nutzer zum Beispiel eine 1024 x 768 Pixel Bildschirmauflösung, dann soll das Design über die volle Höhe gestreckt werden, auch wenn der Inhalt der Seite selbst nur eine Höhe von 200 Pixeln einnimmt.

Jeder Browser reagiert anders, besonders der Internet Explorer interpretiert manche CSS Anweisungen anders als gewünscht. Folgendes Beispiel interpretiert der IE ausnahmsweise aber richtig, genau wie man es verlangt. In folgendem Fall erstreckt der IE das Div über die volle Höhe des Bildschirms:

Funktioniert im IE, aber nicht im Firefox oder anderen modernen Browsern:

html, body {
  color: #aaa; /* grauer Text auf der gesamten Seite */ 
}

#container {
  height: 100%; /* Container auf volle Höhe strecken */
  background-color: #f0f0f0; /* Hintergrund grau färben */
  width: 50%; /* Div auf halbe Breite */
  margin: auto; /* Div Container zentieren */
}

Man denkt im ersten Moment, dass Firefox, Chrome und Opera die CSS Anweisung "height: 100%" nun falsch interpretieren, aber nein. Die Anweisung wird in der Tat wieder mal vom Internet Explorer falsch umgesetzt. Die falsche Anzeige ist aber in diesem speziellen Fall das gewünschte Ergebnis. Grund ist nämlich, dass das Div #container aus unserem Beispiel bei prozentualen Angaben von seinem Elternelement abhängig ist. Das Elternelement in unserem Fall ist der "body" der HTML Seite. Da wir oben im Beispiel für das "body" Tag aber keine Höhe angegeben haben, kann sich das Div im Firefox oder Chrome nur so weit in die Höhe erstrecken, wie es zum Beispiel mit Text oder anderem Inhalt gefüllt und somit erstreckt wurde.

So wird die Darstellung über die volle Höhe richtig festgelegt:

html, body {
  margin: 0; /* äußeren Abstand / Rand auf zurücksetzen */
  padding: 0; /* inneren Abstand zurücksetzen */
  height: 100%; /* Seite soll über volle Höhe gehen */
  color: #aaa; /* graue Textfarbe */
}

#container {
  background-color: #f0f0f0; /* hellgrauer Hintergrund */
  width: 50%; /* Container auf halbe Breite */
  margin: auto; /* Den Container zusätzlich zentrieren */
  min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */
  height: auto !important; /* important Behel (bei modernen Browsern */
  height: 100%; /* IE soll wie gewünscht interpretieren */
  overflow: hidden !important; /* Firefox Scrollleiste */
}

Da, wie oben bereits erwähnt, sich die prozentuale Höhe am Eltern-Element orientiert, muss dementsprechend das Eltern div, in unserem Fall und in den meisten Webseiten das "body" Tag, ebenfalls mit "height: 100%" definiert werden.

Mit dem CSS Befehl "min-height: 100%" wird dem modernen Browser gesagt, dass sich die Höhe über mindestens 100% erstrecken soll. Die !important Anweisung beim folgenden Befehl "height: auto" stoppt das Überschreiben der Höhe durch die vorletzte Regel "height: 100%", welche für den Internet Explorer für die richtige Anzeige und Darstellung wichtig ist.

Mit dem letzten Befehl wird ein weiterer ungewünschter Fehler behoben: Wenn der Inhalt über den Anzeigebereich geht, dann erscheint die Scrollleiste und das DIV erstreckt sich. Wenn man nach unten scrollt, so kommt man nicht mehr bis zum unteren Rand. Mit der Anweisung "overflow: hidden" unterbindet man dieses Verhalten. Der important! Zusatz sorgt dafür, dass der IE diese Anweisung ignoriert.