Tutorials

[CSS] Footer am Seitenende position

Wer kennt das nicht ?

Man sitz an einem CSS Design und dann möchte man eigentlich etwas ganz einfaches machen , nämlich das der Footer immer unten am Seitenende bleibt - egal wie hoch der content ist.

Doch wie geht das nun ?

Nun hier einmal das CSS:
 

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#content {
   padding:10px;
   padding-bottom:50px;   /* Höhe des Footers */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:50px;   /* Höhe des Footers */
   background:#8cf;
}
 

Kurze Erklärung
Zuerst wird der body auf 100% gestreckt. Sollte es im FF Probleme geben , fügt noch ein min-height:100%; dazu.

#container umschliest alle Div elemente und wird ebenfalls auf 100% gestreckt.
Header Style hat keine besonderheiten.

Doch nun wirds interessant:
#content bekommt ein padding-bottom:50px - hier müsst ihr die höhe eures Footers eintragen, damit es genau passend gemacht wird.

Der #footer bekommt position absolute und wird mit bottom:0 unten ausgerichtet. Hier müsst ihr zudem eine feste Höhe definieren, sonst klappt es nicht.

Das HTML sieht weniger spektakulär aus :

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

Das wars auch schon .
 

Kommentare
Keine Kommentare vorhanden