HTML/CSS

2 Wege den Fußbereich immer am unteren Fensterrand zu platzieren

Im folgendem werden zwei Möglichkeiten beschrieben um einen Fußbereich („Footer“) – also ein DIV – immer am unteren Fensterrand zu platzieren.

Height 100% – Voraussetzende CSS Definitionen
Voraussetzung für beide Möglichkeiten ist ein DIV mit der Höhe 100%.
Dazu muss das html- und body-Element auf eine Höhe von 100% gesetzt werden. Ebenso müssen margin und padding auf 0 gesetzt werden.

html, body {
height: 100%;
margin: 0;
padding: 0;
}

Um den Fußbereich immer unten zu platzieren wird für beide Varianten ein Pagewrapper (page) verwendet, welcher mindestens die Höhe des Fensters hat.

#page {
min-height: 100%
height: auto !important; /* Für IE6 */
height: 100%; /* Für IE6 */
}

Der Fußbereich wird mit einer Höhe von 20px definiert. Da in beiden Varianten der Inhalt unter den Fußbereich angezeigt werden würde, muss für das content-Element ein padding-bottom von 20px definiert werden.

#content {
padding-bottom: 20px;
}
Variante 1 – Negatives margin
Der Fußbereich wird mit einem negativen margin über das page-DIV geschoben. Dazu müssen page- und footer-DIV in der HTML-Seite untereinander angeordnet werden.Definition des footer-DIV:

#footer {
height: 20px;
margin: 0;
margin-top: -20px;
}

Die Anordnung in der HTML-Seite:

<div id=“page“>
<div id="content">
<!—Inhalt -->
</div>
</div>
<div id=“footer“>
</div>
Variante 2 – bottom: 0
In dieser Variante wird der Fußbereich absolute am unteren Bereich des page-Elements positioniert. Dazu muss dem page-Element die Position „relative“ und dem footer-Element die Position „absolute“ gegeben werden. Der Fußbereich wird dann in der HTML-Seite innerhalb des page-Elements angegeben.Page-Element relativ definieren:

#page {
position: relative;
min-height: 100%
height: auto !important; /* Für IE6 */
height: 100%; /* Für IE6 */
padding: 0;
}

Footer „absolute“ und mit „bottom: 0″ definieren:

#footer {
position: absolute;
bottom: 0;
height: 20px;
margin: 0;
}

Die Anordnung in der HTML-Seite:

<div id=“page“>
<div id="content">
<!—Inhalt -->
</div>
<div id=“footer“>
</div>
</div>