Blog

CSS footer onderaan scherm laten ‘kleven’

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-height100%;
   
heightauto !important;
   
height100%;
   
margin0 auto -200px;
}

#footer, .push 
{
  height
200px;
  
clearboth;

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:

Congoo The Idea Factory

Paco Or Jewels

Plasticollect

GoodBytes.be

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.

Bron artikel

- De originele broncode op Ryanfait

About the author

Hi there! I'm a freelancer who can help you build a great application or website - yes, also for mobile devices. If you speak Dutch, check out my eBooks.

Hire me, whether it's to help you build your next project or to organize a workshop. I teach about web design + development in college and I'd be happy to put a workshop together for you.