Heute habe ich mal wieder eine HTML-Seite erstellt und hatte wieder mal den frommen Wunsch, den Footer am Seitenende haben zu wollen. Egal wie groß das Browserfenster gerade ist. Schließlich bin ich mit folgendem Code gut zurecht gekommen:
<html> <body> <div id="nonfooter"> <div id="content"> Hier sollte die komplette HTML-Seite rein </div> </div> <div id="footer"> Hier kommt der Footer rein </div> </body> </html>
Hier nun das benötigte CSS:
html { height: 100%; }
body { height: 100%; }
#nonfooter { position: relative; min-height: 100%; }
* html #nonfooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }
Das war’s.