Eindelijk een sticky footer zonder pusher div!

Gepubliceerd op: 31-10-2013 13:06

De sticky footer is zo ongeveer het meest beschreven en bediscussieerde element van een webpagina sinds het ontstaan van het internet. Vele oplossingen circuleren over het wijde web, maar nu, sinds de ondersteuning van CSS3 goed voor elkaar is, kunnen we eindelijk een sticky footer maken zonder loze elementen. Een semantisch correcte stickyfooter, wie wil dat nou niet?

De standaard sticky footer

Het grootste deel van van de stickyfooter magic is wel bekend: zowel de html als body moeten een hoogte van 100% hebben zodat de container daar zijn hoogte aan kan aanpassen. Vervolgens plak je daar een footer onder met een vaste hoogte, en om te zorgen dat de footer in beeld valt in plaats van erbuiten geef je je container een negatieve margin-bottom ter grootte van de hoogte van je footer.

Voor pagina’s met te korte content heb je nu een prachtige sticky footer, maar bij pagina’s met langere content zullen de laatste x regels achter of over de footer vallen. Om dit te voorkomen werd voorheen altijd gebruik gemaakt van een pusher-div, een semantisch incorrect trucje waarbij een leeg element je html-structuur vervuild. Omdat we natuurlijk valide code willen schrijven die aan alle standaarden, accessability keurmerken en webrichtlijnen voldoet kunnen we geen loze elementen gebruiken. De redding kwam binnen handbereik met het border-box model.

Border-box vs content-box

Grafische weergave van de verschillen tussen box-sizing border-box en content-box

Browsers maken standaard gebruik van het content-box model, dit model bepaalt de afmetingen van een block-level element aan de hand van de contentbox, en telt daar vervolgens de padding en de border bij op. Een element met een width van 200px, een padding van 20px en een border van 2px wordt dus uiteindelijk 244px breed. Niet handig.

Het border-box model hanteert een logischer opbouw; de padding en border vallen binnen de opgegeven afmetingen, de margin vanzelfsprekend niet. Het hiervoor beschreven element heeft nu dus een breedte van 200px, minus de padding en border blijft er 156px over voor de content.

Semantisch correcte sticky footer code

Hoe kunnen we dit nu gebruiken om een stickyfooter te maken zonder pusher-div? We zetten het box-model van de container op border-box en geven ook een padding-bottom ter grootte van de footerhoogte op. De content in je container zal nu niet meer achter of over je footer lopen!

css3 stickyfooter zonder pusher div met box-sizing: border-box

Hieronder vind je de complete semantisch correcte stickyfooter code, voor een live-demo klik je hier!

HTML

<html>
<body>
  <div class="container">
    <p>content lorem ipsum</p>
  </div>
  <div class="footer">
    <p>footer lorem ipsum</p>
  </div>
</body>
</html>

CSS

html, body {
  height: 100%;
}
.container {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  min-height: 100%;
  margin-bottom: -50px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
}

4 reacties op dit artikel »

Aanbevolen artikelen