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

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 sebst 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 Browser:

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 wiedermal 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 Elternelemnt 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 mit zum Beispiel mit Text oder anderem Inhalt gefüllt und somit erstreckt wurde.

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

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 folgendem 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 Anzeigebreich geht, dann erscheint die Scrollleiste und das DIV erstreckt sich. Wenn man nach unten scrollt, so kommt man nicht mehr bis zum unten Rand. Mit der Anweisung „overlfow: hidden“ unterbindet man dieses Verhalten. Der important! Zusatz sorgt dafür, dass der IE diese Anweisung ignoriert.

  1. Basil
    5. März 2013, 11:55 | #1

    Hat mir sehr geholfen, Danke.

  2. 17. August 2013, 00:34 | #2

    Hat mir weitergeholfen, Problem behoben, hatte bisher nur height: 100%; und das hatte nicht funktioniert, wenn der Inhalt größer ist als das Fenster, also man Skrollen muss.

  1. Bisher keine Trackbacks