CSS Sticky footer
07-10-2010
Wat is een "Sticky footer"?
Een sticky footer, is een footer die onderaan de pagina staat ongeacht de hoeveelheid content.
Is er meer content dan ruimte op het scherm, dan wordt de footer verder buiten het scherm gedrukt.
Er zijn verschillende oplossingen voor het "sticky footer" probleem, maar deze is makkelijk en werkt in alle grote browsers.
De browsers waarin deze oplossing werkt en getest is: Internet Explorer 6/7/8 , Firefox 1.5/2/3.
Andere browsers zijn niet getest, maar de kans is zeer groot dat deze oplossing daar ook in werkt.
De negatieve margin van #container is dezelfde hoogte als #push en #footer, let op dat de negatieve margin de totale hoogte is van #footer (dus ook paddings en borders).
CSS
- * {
- margin: 0;
- }
- html, body {
- height: 100%;
- }
- #container {
- min-height: 100%;
- height: auto !important;
- height: 100%;
- margin: 0 auto -80px;
- }
- #footer, #push {
- height: 80px;
- }
HTML
- <html>
- <head>
- <link rel="stylesheet" href="style.css" />
- </head>
- <body>
- <div id="container">
- <p>Alle content hier.</p>
- <div id="push"></div>
- </div>
- <div id="footer">
- <p>Footer content hier.</p>
- </div>
- </body>
- </html>
Frank
Dank je voor de uitleg. Nog even een klein vraagje?
"let op dat de negatieve margin de totale hoogte is van #footer (dus ook paddings en borders)"
Betekent dat als ik een top-border van 2 px gebruik dat de negatieve margin van de container dan -82px moet worden?
Jur
Hey, ik krijg dit nooit helemaal zoals ik wil. IE luistert vaak helemaal niet. En wanneer ik dingen zoals "float: left;" oid gebruik wordt het helemaal een prutje... Iemand die dit zelfde probleem heeft/had?
Robin
@Frank Ja, dat klopt helemaal.
