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.
17 reacties tot nu toe
Rob Frederix zei 2 jaar geleden:
Webdesign Roosendaal zei 2 jaar geleden:
Je kan nog een stap verder gaan door de IE6 hack in een apart IE6 css bestand te plaatsen trouwens.
Bjorn Ruysen zei 2 jaar geleden:
Net ingeplant in een bestaand project en het was zo gebeurd, merci!
Unexpected zei 2 jaar geleden:
Webdesign zei 2 jaar geleden:
r4 kaart zei 2 jaar geleden:
David Candreva zei 2 jaar geleden:
Thomas zei 2 jaar geleden:
Keep it up!
r4 flash kaart zei 2 jaar geleden:
Hypotheekrente overzicht zei 2 jaar geleden:
Boudewijn zei 1 jaar geleden:
ps3 gamer zei 1 jaar geleden:
wva zei 51 weken geleden:
Controvi zei 29 weken geleden:
Goede duidelijke uitleg.
Voor diegene die waarbij het niet werkt in eerste instantie, zoals bij mij.
Geef de 'push' div een breedte.
Anders krijgt de div de hoogt niet.
Maar echt bedankt.
Dit ga ik vaker gebruiken.
groeten
Oldtimerverzekering zei 9 weken geleden:
Aloneal zei 5 weken geleden:
Verder wilde ik dat mijn copyright net een kleine regel boven de onderkant van de pagina zou zweven. Dat heb ik rechtgetrokken door !important margin een extra -30px mee te geven.
Ik had het alleen niet klaar gekregen. Dus heel fijn dat er pagina's als deze op het www te vinden zijn.
Kredietsimulator zei 2 weken geleden: