Artikel abonnieren
Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen height:100%; ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.
Der Aufbau: HTML
Der HTML-Quelltext hierzu ist einfach, es wird ein DIV-Element erstellt, welches alle weiteren Inhalte umfasst. Dieses bekommt eine Klasse, oder besser eine ID zugewiesen, damit es leichter per CSS gestaltet werden kann.
<body> <div id="wrapper"> [...] </div> </body>
HTML und BODY
Damit, dem DIV nun einfach eine Höhe von 100% zuzuweisen, ist es noch nicht getan. Die 100% beziehen sich ja auf die Größe des Eltern-Elements, dem BODY, dieser braucht also auch eine Höhe von 100%. Das HTML-Element bekommt ebenfalls eine Höhe von 100%, schließlich ist es ja das Eltern-Element von BODY.
html, body { height:100% }
Viele Browser geben dem HTML oder dem BODY-Element standardmäßig noch einen kleinen Innenabstand, so dass die Inhalte nicht direkt am Rand kleben. In diesem Fall ist das aber unerwünscht, denn einerseits soll das DIV-Element ja die ganze Höhe ausfüllen (ohne andersfarbige Ränder), und andererseits gäbe es sonst Scrollbalken (100% + 5px Innenabstand oben = mehr als 100% -> Scrollbalken).
html, body { margin:0; padding:0; height:100% }
DIV-Element auf 100% der Höhe von BODY
Jetzt wo das BODY- und das HTML-Element auf 100% Höhe sind, muss nur noch das DIV-Element auf 100% Höhe gebracht werden:
#wrapper { /* Für moderne Browser */ min-height:100%; /* Für den Internet Explorer 6 */ height:auto !important; height:100% }
Das Element soll eine Mindesthöhe von 100% haben, bei längeren Inhalten soll es sich von selbst vergrößern. Eine Mindesthöhe kann mit der CSS-Eigenschaft min-height angegeben werden, würde man hier height verwenden, würden moderne Browser nicht zulassen, dass das DIV-Element mit längeren Inhalten mitwächst, es wäre immer genau 100% hoch. Der Internet Explorer 6 hingegen versteht die height-Eigenschaft als Mindesthöhe, min-height kennt der IE 6 nicht.
Hier kann man sich die Tatsache zu Nutze machen, das der IE 6 !important etwas anders interpretiert als andere Browser. Zuerst legt man fest, dass die Höhe des Elements sich dem Inhalt anpassen soll (auto), und das diese Angabe alle anderen Angaben zur Höhe überschreibt (!important). Dann wird dem Element eine Höhe von 100% zugewiesen, was der IE 6 als Mindesthöhe interpretiert. Da der IE 6 das !important in diesem Fall ignoriert, verwendet er die zweite Angabe, und stellt eine Mindesthöhe von 100% ein. Alle anderen Browser beachten das !important, und ignorieren die zweite height-Angabe.
In Aktion sieht das dann so aus: Beispiel
Eine Fußzeile?
Wie erstellt man jetzt eine Fußzeile? Dazu wird ein DIV-Element mit der ID footer erstellt, dieses wird mit CSS wie folgt gestaltet:
#footer { position:absolute; bottom:0; width:100%; height:2em }
Mittels position:absolute; wird festgelegt, dass das Element relativ zum nächsthöheren positionierten Element ausgerichtet wird. Mit bottom:0; bestimmt man, dass das Fußzeilen-Element ganz am unteren Rand vom wrapper-Element positioniert wird.
Nun muss dem wrapper-Element allerdings noch eine relative Positionierung zugewiesen werden, damit das Fußzeilen-Element sich darauf beziehen kann.
#wrapper { /* Für moderne Browser */ min-height:100%; /* Für den Internet Explorer */ height:auto !important; height:100%; position:relative }
Der Inhalt selbst bekommt auch ein eigenes DIV-Element, welches einen Innenabstand so hoch wie die Fußzeile bekommt, so dass die Inhalte nicht unter der Fußzeile angezeigt werden.
<body> <div id="wrapper"> <div id="content"> [Inhalte] </div> <div id="footer"> [Inhalte der Fußzeile] </div> </div> </body>
Das CSS für das content-DIV sieht so aus:
#content { padding-bottom:2em; }
Fertig sieht das dann so aus: Beispiel.
Loading ...
Kommentare
Keine Kommentare bis jetzt.