So gut wie jeder Web-Entwickler stand schon vor dem Problem, dass der Inhalt nicht die komplette Seite ausfüllt und somit der Footer nicht am Ende ist.
Genau für dieses Problem gibt eines eine Lösung - den Sticky Footer. Ist der Inhalt nicht lang genug bleibt der Footer trotzdem am Ende der Seite und rutscht weiter runter sobald der Inhalt groß genug ist.
Um das zu schaffen brauchen wir erstmal unser HTML Grundgerüst:
<div class="wrap"> <div class="main clearfix"> </div> </div> <div class="footer"> </div>
Der gesamte Inhalt der Seite muss sich vor bzw. innerhalb des main <div> Tags befinden. Der Footer kommt logischerweise in footer <div> Tag. Damit das ganze jetzt funktioniert brauchen wir noch ein bisschen CSS.
html, body, #wrap {
height: 100%;
}
body > .wrap {
height: auto;
min-height: 100%;
}
.main {
padding-bottom: 150px;
}
.footer {
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
}Wichtig dabei ist, dass die Höhe des Footers drei mal angegeben wird. Damit der Inhalt aus dem main Container nicht in unseren Footer hineinläuft und damit der Footer nicht außerhalb des sichtbaren Bereichs liegt. Passt ihr die Höhe des Footers an so müsst ihr auch den padding-bottom des main Containers und den margin-top (Achtung: Muss negativ sein) des Footers mit dem gleichen Wert füllen.
Viel Spaß beim ausprobieren.