Footer bottom hack
Februar 1, 2009 | Kommentieren
Es gibt viele Möglichkeiten den Footer immer am unterem Ende einer Seite auszurichten. Hier meine Lösung welche nur ein paar Zeilen Code benötigt und in dem meisten Browsern wie IE 6/7, Firefox und Safari einwandfrei funktioniert.
Das CSS sieht wie folgt aus. Zu beachten wäre, dass der untere negative Margin der “content” klasse die selbe Höhe hat wie auch die “footer” und “push” Klassen.
* { margin: 0; } html, body { height: 100%; } .content { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px auto; } .footer, .push { height: 100px; clear: both; }
Und jetzt die HTML Struktur:
<html> <head> .... </head> <body> <div class="content"> <p>Hier der Inhalt</p> <div class="push"></div> </div> <div class="footer"> <p>Footer Inhalt</p> </div> </body> </html>
