Joran Quinten - Footer onderaan pagina met xHTML & CSS

donderdag

oktober

Footer onderaan pagina met xHTML & CSS

Onderstaande snippets zorgen er voor dat een footer met behulp van CSS altijd onderaan de pagina wordt geplaatst, ongeacht de lengte van de pagina. Dit snippet bestaat uit twee delen; een stukje xHTML en bijbehorende CSS.

De html-structuur richt je alsvolgt in;

...
<div id="container">
[Algemene inhoud]
</div>
<div id="footer">
[Footer inhoud]</div>

Door onderstaande CSS definieer je de plaatsing van de elementen;

* {
margin: 0;
}
html, body {
height: 99%; // voorkomt scrollbalk, mag ev. ook 100%
}
div#container {
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -50px;
}
div#footer, div#marge {
height: 50px;
}

Toelichting; door de div#container -die nu minstens even hoog is als de viewport- een negative onder-marge te geven die even hoog is als de div#footer (en div#marge), wordt de footer helemaal naar onder geduwd. Wanneer de inhoud van de container langer is dan de viewport, wordt de footer ook naar beneden geduwd. Normaal gesproken werkt dit ook naar behoren, met uitzondering van Internet Explorer 7. De div#marge zorgt er in IE7 voor dat ook daar de inhoud van de container niet achter de div#footer loopt, omdat daar de div#marge al staat. Deze methode werkt vrij eenvoudig en is getest in; Internet Explorer 6 en hoger, Firefox3, Safari4, Opera9 en Google Chrome.