CSS: Layouts mit 100% Höhe

Wenn das Layout einer Seite 100% hoch sein muss, gibt es einiges was beachtet werden muss. Als Vorlage kann dieses Example genommen werden.

Vorbereitung des Stylesheets:


html,body {
margin:0;
padding:0;
height:100%; /* braucht es für die min-height des Containers */
}

Danach muss für die gesamte Höhe ein Container erstellt werden:


div#container {
position:relative; /* braucht es für die Footer Position*/
margin:0 auto; /* Zentriert die Seite (nicht in IE5) */
width:750px;
height:auto !important; /* normale Browser */
height:100%; /* IE6: setzt dies wie min-height um*/
min-height:100%; /* normale Browser */
}

Der Head und der Content können nun normal platziert werden. Damit nun der Footer der Seite immer am unteren Rand klebt, muss folgendes im Stylesheet definiert werden:


div#footer {
position:absolute;
width:100%;
bottom:0; /* Positioniert dies ganz unten */
}