Schon einmal Versucht ein Element über die gesamte Höhe des Browsers laufen zu lassen?
Hier eine Lösung ganz ohne Javascript oder jQuery, ganz einfach mit CSS.
Als Beispiel eine einfach HTML-Datei mit einem Schwarzen Hintergrund und einen weißen DIV-Container der zentriert in der Höhe über die gesamte Breite laufen soll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="style.css" type="text/css" rel="stylesheet"/> <title>Meine Seite</title> </head> <body> <div id="allwrap"></div> </body> </html> |
Die CSS-Datei dazu würde folgendermaßen aussehen:
body { background-color:#000; height: 100%; /* Definiert die Höhe für Child-Elemente */ margin: 0; padding: 0; } #allwrap { width:600px; background-color:#fff; margin:0 auto; min-height: 100%; /* Mindesthöhe*/ height:auto !important; /* Ganze Höhe */ height:100%; /* Höhe für den Internet Explorer */ overflow: hidden !important; /* Scroll-Leiste bei kurzem Content verbergen*/ } |
Da sich die Prozentuale Höhe unseres Elements an der Höhe des Eltern-Elements orientiert, müssen wir diesem, in unserem Beispiel dem “body” zunächst die Höhe 100% geben.
Als nächstes bekommt unser Element die Höhe “min-height:100%”, damit sagen wir ihm, dass das Element mind. 100% in der der Höhe einnehmen soll, egal wie kurz der Inhalts-Text ist. Würden wir nur height:100% angeben, könnten wir bei Scrollbaren-Text diesen nichtmehr vollständig sehen da dieser nach 100% abgeschnitten werden würde.
Damit sich unser Element über die gesamte Höhe der Seite ausbreitet, bekommt es noch zusätzlich zur “min-height” (Höhe ohne Scrollbereich) “height:auto”, damit weiß es, dass er sich immer soweit wie möglich in der Höhe ausbreiten kann.
Da der Internet Explorer die Prozentuale Höhe anders Rechnet als andere Browser, muss dieser leider noch “height:100%” bekommen, damit unsere letzte Angabe für die restlichen Browser nicht überschrieben wird, bekommt das “height:auto” noch eine “!important” Regel hinzu, welches vom Internet Explorer nicht interpretiert wird.
Bei größerem Inhalt kann es sein, dass ein Scrollbalken erscheint und das Element nicht ganz bis zum Browserrand reicht, dafür fügen wir noch ein “overflow:hidden” hinzu. Da das für den Internet Explorer allerdings nicht notwendig ist, nutzten wir wieder die “!important” Regel.
Ist all das beachtet worden, läuft unser Element wie gewünscht Browser unabhängig über die gesamte Höhe der Seite.
