CSS footer onderaan scherm laten ‘kleven’ - jun 23
Regelmatig onderschatten webdesigners de kracht van een footer onderaan een webpagina. Een footer is meestal het laatste waar bezoekers naar kijken en dus ook het laatste waar veel webdesigners aan denken. Een footer kan echter de kers op de taart zijn voor een creatief en goed ontwerp. Bovendien kan je vaak waardevolle informatie onder in de footer plaatsen, zoals contactgegevens, de klassieke copyright mededelingen of zelfs een compleet contactformulier.
Hoe zorg je er nu voor dat een footer altijd netjes onderaan het scherm blijft kleven ondanks de inhoud die op de pagina gebruikt wordt?
Plaats volgende code in een aparte stylesheet, bijvoorbeeld “screen.css”.
(Dit was één van de allereerste blogposts op GoodBytes en diende destijds vooral als referentie voor eigen gebruik. De CSS code is niet door ons bedacht, maar kan teruggevonden worden op deze link.)
CSS
*
{
margin: 0;
}
html, body
{
height: 100%;
}
#contentwrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
#footer, .push
{
height: 200px;
clear: both;
}
Bovenstaande CSS-code zorgt ervoor dat een footer van 200 pixels hoog (dit kan je natuurlijk wijzigen in je CSS) altijd onderaan het scherm zal hangen, ongeacht de inhoud die binnen de #contentwrapper staat.
xHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="screen.css" />
</head>
<body>
<div id="contentwrapper">
<p>Hier komt de content.</p>
<div class="push"></div>
</div>
<div id="footer">
<p>Footer content - copyright - contact details</p>
</div>
</body>
</html>
Bovenstaande xHTML-code zorgt ervoor dat de footer netjes onder de “contentwrapper” geplaatst wordt en dat de footer netjes op zijn plaats valt.
Enkele voorbeelden van footers die we onlangs gebruikt hebben:
Smashing magazine heeft bovendien een uitstekend artikel online staan met meer voorbeelden van creatieve footers. Enjoy en laat gerust een reactie achter met jullie eigen footerontwerpen.
19 commentaren geserveerd
Thx, eindelijk een die wel werkt :)
Hey,
tutorials komt me bekend voor, heel bekend.
Maar kan u me even uitleggen waarom die push nodig is?
Alvast bedankt!
Dag Frederik, de “push” is nodig om ervoor te zorgen dat je footer niet over je inhoud zou kunnen schuiven. Geef je footer en push bijvoorbeeld eens een achtergrondkleur, en vergelijk eens wat er gebeurt als je de push uit je xHTML-code haalt.
bij mij duwt hij die te veel naar beneden, mijn footer is 274px groot maar ik zie alleen maar een deel en om de rest te zien moet ik scrollen.
ge moet in de code hierboven die 200px aanpassen aan de groote van je footer eh? beide?
voorbeeld:
http://i119.photobucket.com/albums/o134/krike06/footer_problem.png
eindelijk gevonden wat het probleem was :D ik heb nog een header div met een hoogte van 190px en dat is waarom de footer naar beneden geduwd werd, ik moest mijn header div verplaatsen en hem in de contentwrapper zetten helemaal bovenaan.
misschien nuttig om te vermelden voor degenen die hetzelfde probleem zouden hebben
Hallo,
nu heb ik de bovenstaande code gebruikt maar zodra de content binnen de wrapper hoger word dan het scherm dan schuift te content vrolijk over de footer heen! Iemand enig idee wat het probleem kan zijn? Alvast bedankt!!
Heb je exact dezelfde code gebruikt? Valideer dan zowel je CSS als xHTML strict eerst eens via validator.w3.org. Als je nog problemen hebt laat dan nog even iets weten!
Ik heb de door jullie geschreven code meerdere malen gecontroleerd maar die moet toch goed zijn aangezien ik die gekopieerd heb.
Maar ik denk dat het probleem voort komt uit het feit dat ik voor de “gewone content” margin-top heb gebruikt. Nu begin ik te vermoeden dat dat de oorzaak is dat het alles over de footer heen plaats.
Dries, haal die margin-top er eens uit. Wat wil je juist bereiken met die margin-top? Probeer misschien eens met padding te werken?
De code werkt goed volgens mij zolang ik maar niet met margins werk.
Ik dank u voor deze css-code!
Uiteraard is er wel een kleine maar… Nu ik niet met margins kan werken is er geen mogelijkheid meer om de site horizontaal te centreren. Ik gebruikte de CSS;
left: 50%;
margin-left: -400px;
(site is 800px breedt)
Nu heb ik geprobeerd om margin left te vervangen door padding left maar dat werkt niet helaas. Alles blijft links uitgelijnd.
Heeft u een suggestie voor dit probleem?
Alvast hartelijk dank!!
uitlijnen doe je als volgt:
margin-left: auto;
margin-right: auto;
of kort:
margin: 0 auto;
zorg wel voor een vaste breedte van de div die je wil uitlijnen
Het werkt perfect nu!
Margin-top was het probleem.
In de toekomst zal ik maar geen margin top meer proberen te gebruiken… ;)
Groet,
Dries
Bedankt man,
dit werkt super, dit is presies wat ik zocht.
Gr werner
bedankt, eindelijk gedaan met het prutsen :)
Beter goed gejat dan slecht bedacht!
http://ryanfait.com/sticky-footer/
Geef de bedenker ook credit, hij verdient het.
Hey Adriaan, dit artikel was 1 van onze allereerste posts op dit blog en diende destijds vooral als persoonlijke referentie. De code werd niet door ons bedacht. De link werd toegevoegd aan het artikel, thanks!
This really good info here interesting, thank you very much.
Dus wat doet die Contentwrapper ?
> Hier komt de context <
Kan je niet gewoon die footer plaatsen, zonder die contentwrapper ?
Had even een probleem. Op Google opgezocht en waar komt ik terecht… Op een ex-docent van mij zijn site ! :D
Thanks, dit werkt perfect.
Grtz,
Dennis