Een crossbrowser sticky footer maken
Een sticky footer is een footer die altijd onderaan de pagina staat ongeacht hoe hoog de content van de pagina is. Geregeld kreeg ik de vraag hoe men dit gemakkelijk kon realiseren, vandaar dat ik het nuttig vond om dit kort via een blogpost uit te leggen. In deze tutorial leer je op een snelle en gebruiksvriendelijke manier een sticky footer te maken.
Wat is een goede Sticky Footer?
Op het internet kan je enkele tientallen voorbeelden vinden van hoe je een sticky footer kan maken, de een is al wat efficiënter dan de andere.
De kenmerken van een goede sticky footer:
- Gebruikt uitsluitend semantische tags
- Geen hacks nodig
- Crossbrowser compatibiliteit
De ultieme sticky footer maken
In slechts 2 stappen leer je een crossbrowser footer te maken. In deze tutorial gaan we er wel vanuit dat je over basiskennis HTML en CSS beschikt.
Stap 1: Een nieuw HTML document maken
Maak een nieuw xHTML-document en stel zeker een doctype in, deze stel je best in als xHTML 1.0 transitional of xHTML 4.0.1 strict/transitional.
Je kan onderstaande code kopiëren en plakken in een .html bestand.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sticky Footer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Pagina titel</h1>
<p>Content komt hier</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<p>Footer - ©2009</p>
</div>
</body>
</html>Stap 2: De CSS
In de eerste regel gaan we de selector * gebruiken om alle elementen op onze pagina te resetten door de property margin de value 0 toe te kennen. Als volgt gaan we de body en html selector een height van 100% geven, dit zorgt ervoor dat de eerste div in de body een hoogte van 100% krijgt. Vervolgens zorgen we ervoor dat de div #wrapper een minimum hoogte van 100% heeft. Je ziet ook dat we height: auto !important gebruiken, dit is een *propere hack* om min-height in Internet Explorer 6 aan de praat te krijgen. De vierde property heeft een negatieve margin die even hoog is als de footer en de push div die op de laatste CSS regel wordt gedefinieerd.
Maak een nieuw CSS bestandje aan en link deze aan het html bestand. Deze code kan je ook kopiëren en plakken.
* { margin:0; } /* alle elementen resetten, best de Yahoo! reset gebruiken of iets vergelijkbaars */
body, html{ height:100%; } /* De body en html 100% hoogte geven */
div#wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -60px; } /* negatieve margin is gelijk aan hoogte van de footer */
div#push, div#footer{ height:60px; } /* De footer en de push div een gelijke hoogte geven */Conclusie
Zoals je ziet is het maken van een sticky footer erg simpel. Oplossingen die je op het internet kan vinden met browserhacks zijn allemaal overbodig of richten zich op browsers die in de praktijk niet meer gebruikt worden.
8 reacties tot nu toe
Rob Frederix zei 12 weken geleden:
Webdesign Roosendaal zei 10 weken geleden:
Je kan nog een stap verder gaan door de IE6 hack in een apart IE6 css bestand te plaatsen trouwens.
Bjorn Ruysen zei 10 weken geleden:
Net ingeplant in een bestaand project en het was zo gebeurd, merci!
Unexpected zei 9 weken geleden:
Webdesign zei 9 weken geleden:
r4 kaart zei 8 weken geleden:
David Candreva zei 8 weken geleden:
Thomas zei 1 week geleden:
Keep it up!