CSS: Layouts mit 100% Höhe
12. Januar 2010
Keine Kommentare
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 */
}
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 */
}
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 */
}
position:absolute;
width:100%;
bottom:0; /* Positioniert dies ganz unten */
}
Popularity: 3% [?]
Twitter It!