Wie man den Sticky Footer-Code benutzt
Einleitung
Bei Google kann man jede Menge Lösungen für einen am Seitenende haftenden Footer ("Sticky Footer") finden. Ich habe viele ausprobiert und für gewöhnlich versagen sie in der ein oder anderen Situation. Das Problem scheint zu sein, dass einige dieser Lösungen schon älter sind und mit alten Browsern funktioniert haben, aber das in neueren Browser-Versionen nicht mehr tun. Weil diese Lösungen alt sind und in der Vergangenheit häufig verlinkt wurden, stehen sie bei Google immer noch hoch im Kurs. Viele Web-Designer auf der Suche nach einer Sticky Footer-Lösung sitzen dann ratlos da während sie diese alte Lösungen ausprobieren, weil es die ersten sind, die sie auf ihrer Suche gefunden haben.
Die Lösung von Ryan Fait ist recht bekannt und funktioniert, aber sie benötigt einen zusätzlichen <div>-Tag ohne Inhalt um den Footer nach unten zu drücken. Manche HTML-Puristen finden das eine nahezu blasphemischen Verwendung von nicht-semantischem Code. Unsere Lösung verzichtet daher auf das zusätzliche <div>.
Die Sticky Footer-Lösung, die hier gezeigt wird, basiert auf Informationen, im Artikel Exploring Footers auf A List Apart gefunden wurden und erweitert außerdem die Arbeit von Cameron Adams und diesem Artikel auf lwis.net. Sie wendet einen Clear-Fix-Hack an um den Footer in Google Chrome und anderen Browsern, in denen der Footer beim Ändern der Fenstergröße nach oben fließen würde, an Ort und Stelle zu halten. Der Clear-Fix-Hack behebt auch Probleme, die bei der Verwendung von zwei- oder dreispaltigen Float-Layouts auftreten können. Sie wurde in mehr als 50 Browsern getestet und scheint großartig zu funktionieren.
Der HTML-Code
Im Folgenden ist die grundlegende Struktur des HTML-Codes dargestellt. Beachte, dass sich der <div>-Tag mit dem Footer außerhalb des umschließenden <div>-Tags befindet.
<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Inhalte werden innerhalb des <div>-Tags "main" platziert. Wenn Du zum Beispiel ein zweispaltiges Float-Layout einsetzt, könnte Dein Code folgendermaßen aussehen:
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
Ein Header könnte innerhalb des umschließenden <div>-Tags, aber innerhalb von "main" platziert werden.
<div id="wrap"> <div id="header"> </div> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Wenn Du irgendwelche Elemente außerhalb des umschließenden <div>-Tags und außerhalb des Footers platzieren willst, musst du absolute Positionierung verwenden, da ansonsten die Berechnung der Gesamthöhe auf 100 % nicht mehr funktioniert.
Der CSS-Code
Das ist der CSS-Code, der den Footer am Ende der Seite anhaften lässt:
html, body, #wrap {height: 100%;}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {padding-bottom: 150px;} /* Muss genau so hoch sein wie der Footer */
#footer {
position: relative;
margin-top: -150px; /* Negativer Wert der Footer-Höhe */
height: 150px;
clear:both;
}
Beachte, dass die Footer-Höhe dreimal verwendet wird. Dabei ist äußerst wichtig, dass alle dreimal derselbe Wert verwendet wird. Die Höhenangaben lassen den umschließenden <div>-Tag auf die gesamte Höhe des Browserfensters wachsen. Der negative Rand (margin) des Footers schiebt ihn nach oben in den Innenabstand (padding) des "main"-Bereichs. Da der "main"-Bereich innerhalb des umschließenden <div>-Tags liegt, ist der Innenabstand (padding) bereis Teil der Gesamthöhe von 100 %. Dadurch bleibt der Footer am Ende der Seite.
Aber damit sind wir noch nicht fertig. Wir müssen noch den Clear-Fix-Hack auf den "main"-Bereich anwenden.
Clear-Fix-Hack als Rettung
Viele Web-Designer kennen den Clear-Fix-Hack. Er löst viele Probleme im Zusammenhang mit fließenden Elementen. Wir benutzen ihn hier, um den Footer in Google Chrome am Seitenende haften zu lassen. Er löst auch Probleme, die auftreten, wenn Du ein zweispaltiges Float-Layout einsetzt, bei dem Du den Inhalt auf die eine und die Sidebar auf die andere Seite fließen lässt. Die fließenden Inhalts-Elemente innerhalb des "main"-Bereichs können dafür sorgen, dass der Footer in einigen Browser nicht mehr haftet.
Also fügen wir den Clear-Fix-Hack unserem Stylesheet hinzu:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Bereich nicht für IE-mac Ende */
Wenn Du lieber die Methode von Ryan Fait mit dem zusätzlichen <div>-tag zum Herunterdrücken des Footers einsetzt, wirst du auch den Clear-Fix-Hack einsetzen müssen, wenn du ein mehrspaltiges Float-Layout verwendest.
Bekannte Probleme
Höhen und Ränder
Wenn Du innerhalb bestimmter Elemente, vielleicht im Header, im "wrap"- oder im "main"-Bereich, obere und untere Ränder (margin) einsetzt, kann das den Footer um die Höhe dieses Randes nach unten schieben. Benutze stattdessen einen Innenabstand (padding) um den Abstand herzustellen. Du wirst dieses Phänomen bemerken auf Seiten mit wenig Inhalt, auf denen der Footer am unteren Rand des Browserfensters sein sollte, die Scrollbalken aber anzeigen, dass er sich etwas weiter unten befindet. Suche in diesem Fall nach dem verursachenden Rand (margin) und ersetze ihn durch einen Innenabstand (padding).
Sei vorsichtig, wenn Du einen Innenabstand für den "main"-Bereich an einer anderen Stelle Deines Stylesheets angibst. Wenn du z.B. padding:0 10px 0 10px; hinzufügst, überschreibst Du damit den wichtigen unteren Innenabstand, der genau so groß sein soll wie die Höhe Deines Footers. Das würde dann dafür sorgen, dass der Footer mit dem Inhalt auf langen Seiten überlappt (in Google Chrome).
Schriftgrößen
Denke beim Festlegen von Schriftgrößen mit relativen Maßeinheiten in Deinem Stylesheet daran, dass manche Betrachter durch ihre Einstellungen größere Schriften erhalten als Du geplant hast. In einigen Elementen, z.B. im Footer selbst, kann das die Höhenangaben ungültig machen und eine Lücke unterhalb des Footers erzeugen wenn nicht genügend Platz für die Ausdehnung des Textes nach unten vorhanden ist. Versuche also absolute Schriftgrößenangaben mit px anstelle von relativen Angaben mit pt oder em zu verwenden.
