Ein Problem das einem häufig in der Umsetzung von Layouts begegnet: Der Footer soll sich immer an der unteren Kante des Browsers befinden, selbst wenn der Inhalt nicht reicht um eine Scrollbar zu erzeugen und so den Footer automatisch nach unten zu drücken. In diesem Artikel wird eine Methode vorgestellt, diesen Effekt nur mit CSS und HTML zu realisieren.
Die auf CSSStickyFooter vorgestellte Methode ist mit allen gängigen Browsern kompatibel(IE6+) und verwendet ein minimales Markup um unnötige extra DIV-Container zu vermeiden.
So kann auf Methoden verzichtet werden die mit position: fixed und bottom: 0px hantieren, da dies nicht in allen Browsern gleich gut funktioniert und eine geringe Abwärtskompatibilität bietet.
Die Basis eures Markups benötigt nur 3 DIV-Container um einen immer am unteren Browserrand positionierten Footer zu realisieren:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
Die generelle Seitenstruktur(heißt: jeder dynamische Content) wird anschließend in den #main-Container eingefügt.
Das passende CSS dazu sieht folgendermaßen aus:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
Wie schon in den Kommentaren des Codes angemerkt, muss der padding-bottom eures #main-DIVs die gleiche Höhe haben zugewiesen bekommen wie euer #footer-Container, sowie der negative Abstand dessen(margin-top).
Dadurch wird der Footer immer durch den negativen margin in den Platz gezogen, der vom bottom padding des #main-Containers freigehalten wird. Da dieser immer mindestens 100% hoch ist, sitzt der Footer immer ordentlich am Abschluss der Seite.
Der Opera Fix sorgt dafür, dass Browser die kein min-height verstehen den Container trotzdem richtig anzeigen.
Zudem ist noch ein Hack für IE6 und IE8 nötig, damit dieser den Content auch über 100% Höhe darstellt:
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]–>
Dieser Conditional Comment kann auch über die schon besprochene Browserselektierung angesteuert werden.
keine Kommentare zu " Sticky Footer mit HTML, CSS & umfassender Browserkompatibilität "
Kommentieren