Sticky Footer – die Fußzeile immer ganz unten

Sticky Footer – die Fußzeile immer ganz unten

Die Fußzeile am unteren Rand des Monitors zu positionieren, ohne sie aber dort zu fixieren, ist oft gewünscht. Und um das zu erreichen braucht man weder Javascript Lösungen, noch CSS3 Lösungen die nur in modernen Browsern funktionieren.

Einfach, modern, sauber, schnell und ohne Hacks. Kompatibel mit IE8+, Chrome, Firefox, Opera. Und dann auch noch ohne „wrapper“ Elemente. Fast zu schön um wahr zu sein. Aber genug geschwärmt, hier ist der Code für den Sticky Footer.

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = Höhe der Fußzeile */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Richtig, das war es schon. Nichts mehr nötig als diese paar Zeilen Code.

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

Das Beispiel ist in HTML5, wer also eine nicht HTML5 Seite mit so einem Footer versehen will, ändert einfach den Block in einen div-Block mit einer passenden Klasse, und im CSS die Anweisung.

Achtung: Eine Einschränkung gibt es dann doch. Der Footer funktioniert nur, wenn er eine fixe Höhe hat. Ohne diese muss dann doch wieder auf andere Lösungen zurückgegriffen werden.

9 thoughts on “Sticky Footer – die Fußzeile immer ganz unten

  1. Alex

    Klasse Artikel! Ich bin gespannt, wie es mit Microsoft Spartan funktionieren wird. Man ist ja die ein oder andere Überraschung mit Microsoft gewohnt. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.