Sticky Footer bedeutet, dass die Fußzeile immer am gefühlten unteren Ende der Seite „kleben“ (daher sticky) soll. Ist die Seite also länger als das Browserfenster, soll der Footer ganz normal darunter angeordnet sein. Ist die Seite aber inhaltlich (viel) kürzer, soll der Footer auch am unteren Fensterrand haften und nicht bereits am eigentlichen Ende der Seite irgendwo in der Bildschirmmitte schweben. Ist die Höhe des Footers aufgrund flüssigen, responsiven Designs allerdings flexibel hoch, lässt sich das nicht so leicht lösen: die 3 derzeit besten Lösungsansätze mit ihren Vor- und Nachteilen.
Der Footer soll auch bei responsivem Webdesign immer unten „kleben“
Diesen Fall will man möglichst einfach (per CSS ohne JavaScript) und kompatibel für alle gängigen Browser lösen: den sticky Footer im responsiven Webdesign.
Problem und Lösung des responsive, sticky Footers
Die ursprüngliche Lösung von Ryan Fait ist mittlerweile ein Klassiker und wurde seitdem vielfach genutzt, da sie sehr einfach (reines CSS) und in allen gängigen Browsern nutzbar ist. Allerdings setzt dieser Ansatz voraus, dass der Footer eine fixe, vorher definierte Höhe hat.
Hierzu nutzt man einen Container (hier wrapper), der die ganze Seite außer den Footer (hier stickyfooter) umfasst.
<div id="wrapper">Inhalt ohne Footer</div> <footer id="stickyfooter">Sticky Footer</footer>
wrappers).margin). Vereinfacht:#wrapper{min-height:100%; margin:0 auto -50px; height:auto !important}
#stickyfooter{height:50px; margin-top:-50px}
Das klappt mit position:relative für wrapper und footer und height:100% für html, body selbst im Internet Explorer 5 von gefühlt 1953; nur der Opera benötigt einen :before-Fix.
Diese Lösung setzt aber voraus, dass ich die Höhe des Footers fest definieren kann. Das ist bei einem responsivem Webdesign, das sich kleineren mobilen Bildschirmen dynamisch anpasst, aber in der Regel gerade nicht der Fall.
Daher ist diese an sich einfache und clevere Lösung hierzu nicht tauglich.
Aber es gibt Abhilfe:
Tabellen fürs Layout im modernen, responsiven Webdeisgn? Das ist kein Widerspruch, da wir nicht wirklich Tabellen im Code nutzen, sondern diese per CSS nur simulieren.
Der obige Lösungsansatz mit fester Footer-Höhe ist schon einige Jahre alt. Mittlerweile verstehen („dank“ Microsoft fast) alle modernen Browser neue, weitere CSS-Anweisungen, die man hierzu nutzen kann. Wir verwenden davon display:table und display:table-row.
Wir brauchen dazu wieder einen umschließenden Container (hier wrapper), der aber nunmehr den responsiven, sticky Footer (hier stickyfooter) umfassen muss.
<div id="wrapper">Inhalt ohne Footer <footer id="stickyfooter">Sticky Footer</footer> </div>
Dem wrapper geben wir nun die Anweisung display:table. Er verhält sich dadurch wie eine Tabelle (wodurch auch width:100% und height:100% für html und body Sinn machen).
Dem sticky Footer geben wir die Eigenschaft display:table-row wodurch sich die Fußzeile wie eine Tabellenzeile verhält, welche wie gewünscht bei langen wie kurzen Seiten am unteren Ende kleben bleibt.
Klasse Lösung könnte man meinen, da ebenfalls einfach und die display: table-Sache auch fast alle gängigen Browser kapieren. Nur der Internet Explorer 6 und 7 braucht etwas Nachhilfe mit height:1px für den stickyfooter und height:100%, zoom:1 für den wrapper. Mit etwas JavaScript kann man diese Lösung nochmals verbessern; andere arbeiten mit einem leeren Push-Container vor dem Footer mit height:auto.
Aber diese Lösung ist leider nicht 100%ig responsive. Bei einfachen Inhaltselementen einer Webseite sollte das Design durchaus sauber skalieren und sich flüssig wie gewünscht den mobilen Endgeräten anpassen. Benutzt man aber beispielsweise Slider, die mit (unsichtbaren) Überbreiten arbeiten, funktioniert dieser Ansatz schon nicht mehr.
Der display:table-Ansatz ist daher für viele Seiten eine zeitgemäße Lösung, muss aber je nach genutzten Elementen auf seine Tauglichkeit im Einzelfall getestet werden.
Nun kommen wir zur Zukunft bzw. der neuesten Gegenwart der meisten modernen Browser. Denn für Internet Explorer 8 und 9 funktioniert diese Lösung nicht. Dazu gleich mehr.
Es gibt eine kommende Umsetzung des klassischen Boxen-Modells, kurz flexbox, das in CSS3 flexible Boxen-Module erlaubt (mehr dazu). Das zwar noch nicht Standard, aber moderne Browser können es bereits (weitgehend) korrekt anzeigen. Das bietet bislang ungeahnte Möglichkeiten nur per CSS und ist allein schon daher ein guter Grund sich eingehender damit zu befassen.
Der Code erfordert keinerlei Zusatzcontainer:
<body> Inhalt ohne Footer <footer id="stickyfooter">Sticky Footer</footer> </body>
Wichtig sind nun folgende CSS-Zuweisungen:
body{display:flex; min-height:100vh; flex-direction:column}
#stickyfooter{flex:1}
That’s it! Guckst Du.
Nachteil ist natürlich die derzeitig mangelnde Unterstützung aller gängigen Browser, teilweise sind auch die prefixe -ms-, -webkit- usw. noch erforderlich.
Browser-Unterstützung des felxbox-Modells
Es geht nun einfacher inkl. ausreichender Unterstützung aller gängigen Browser dank Prefix.
Codeaufbau:
<body> <header></header> <main></main> <footer></footer> </body>
Im CSS reicht dann:
html{height:100%}
body{height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:column}
main{-ms-flex:1 1 auto;flex:1 1 auto}
Und läuft – auch im Internet Explorer Fossil 11.
Bis zur ausreichenden Unterstützung kann man etwa auch mit JavaScript und beispielsweise der Bibliothek jQuery nachhelfen, zumal man diese häufig bereits sowieso geladen hat.
Dazu gibt es haufenweise Lösungsmöglichkeiten, wobei mir persönlich die meisten viel zu aufwändig sind. Ich will für dieses Problem nicht beim Seitenladen und Änderns des Browserfensters immer zur Laufzeit den genauen Pixelabstand des Footers nach oben berechnen (müssen).
Machen wir uns dazu noch einmal kurz das eingangs geschilderte Problem bewusst. Bei langen Seiten gibt es kein Problem. Der Footer klebt am Seitenende wo er auch hin soll. Nur bei kurzen Seiten muss der Footer nicht ans Seitenende, sondern ans untere Bildschirmende.
Daher würde es reichen, per JavaScript abzufragen, ob die Seite (body) höher als das Bildschirmfenster (window) ist. Wenn ja, ist nichts veranlasst. Wenn nicht (die Seite ist kürzer), reicht es, dem Footer ein position:absolute; bottom:0 per CSS zu verpassen.
Beispielsweise bei jQuery kann das dann so aussehen:
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
$("footer").css("position","absolute").css("bottom",0);
}
document bzw body misst die Seitenhöhe, window die jeweilige Bildschirmhöhe. Dieses Messen könnte man auch bei resize, also beim nachträglichen Ändern des Browserfensters wiederholen, wodurch es noch dynamischer wird.
Eigentlich eine klasse, einfache und browserkompatible Lösung. Eigentich, denn es gibt einen Fehler in jQuery: bei der HTML5 doctype (<!DOCTYPE html>) verfallen ältere jQuery-Versionen (soweit ich gesehen habe bis einschließlich 1.8.x) in den unschönen Quirks-Modus. Das führt dazu, dass die Höhenberechnungen falsch sind und document immer dem viewport entspricht. Dadurch kann obige Lösung dummerweise natürlich nicht funktionieren. Ansonsten aber eine nachdenkenswerte Lösung mit vielen Vorteilen – jedenfalls wenn man jQuery oder Mootools oder oder sowieso laden muss.
Der sticky footer im responsive Webdesign
Die Lösung des sticky Footers bei reponsivem Webdesign ist auf den zweiten Blick gar nicht so einfach wie es auf den ersten Blick scheinen mag.
Auch wenn es nicht die eine Lösung gibt, kann man einen der obigen Ansätze sicher gut verwenden, um im Einzellfall den sticky Footer auch mit flexibler Höhe bei einem responsiven Webdesign sauber umzusetzen.
Im Blog schreibt Robert Hartl über CMS, SEO & Webdesign. Kontakt →
Kommentare werden erst nach manueller Freischaltung sichtbar. Die übermittelten Daten werden entsprechend der Datenschutzerklärung zur Verarbeitung des Kommentars gespeichert.
Nibelungenplatz 2
D-94032 Passau
Tel.: +49 (0)851/ 966 31-31
Fax: +49 (0)851/ 966 31-41
E-Mail: kontakt@netprofit.de
