Sticky-footer

Soms is de content van een pagina zo gering dat de totale lengte onvoldoende is om het venster te vullen. De footer bungelt dan ergens halverwege het scherm en dat is geen gezicht. Hier kan de 'sticky-footer' een oplossing bieden. Deze footer blijft aan de onderrand van het scherm plakken als hij eigenlijk omhoog zou moeten komen. Natuurlijk blijft de footer wel altijd onder de content en is dus meestal gewoon buiten beeld. Het is dus niet zo dat de sticky footer zich gedraagt als een fixed-position element onder in beeld; dat zou hinderlijk zijn. De sticky-footer treedt dus alleen in werking als er bij een normale footer ruimte zou ontstaan tussen de footer en de onderrand.


website

Even een toelichting: Het voorbeeld hieronder is zo simpel mogelijk gehouden. Merk op dat de footer buiten de wrapper staat. Als deze samen binnen een omhullende wrapper staan dan moet die ook height:100% hebben. Wat moeilijker te begrijpen zijn de regels height: auto !important; en height: 100%; deze moeten er voor zorgen dat het in IE6 ook goed gaat. Dat zou je tegenwoordig dus weg kunnen laten. Van belang is dus die min-height, deze zorgt er voor dat het hele venster benut wordt voor de wrapper. Door de negatieve marge blijft er altijd een plekje vrij voor de footer. Zonder de <div class="push"> zou de footer bij langere pagina's over de content komen. Dat is de consequentie van de negatieve marge. Maar in die gevallen valt de footer dus precies over deze lege div heen. Bij kortere pagina's waarbij de sticky-footer dus in werking treedt, neemt deze div dus wel zelf ruimte in beslag of overlapt deels met de footer. Wat echt belangrijk is, is dat alle parents van de div die hier class= wrapper heet, een hoogte van 100% hebben. Zo niet dan strekt de html zich slechts uit tot een deel van het venster. De body en de inner divs kunnen dan nooit groter worden dan deze parent ook al zijn ze zelf als 100% gedefinieerd. Besef dat de default bij overflow de optie 'auto' is. Dit zal het geval zijn als de pagina niet op het scherm past. Daarom kan de definitie 'height:100%' geen kwaad.

Ook de pagina's op deze site hebben een sticky-footer maar hierbij is de min-height:100% toegekent aan een div met id="contentwrapper". De div met id="wrapper" was al in gebruik om de pagina een zekere breedte te geven en bevatte ook de footer. Let goed op als je een omhullende div een hoogte van 100% geeft dan strekt de gegeven achtergrondkleur en de eventuele border zich niet verder uit dan de schermgrootte en ontbreekt deze opmaak bij de overflow. Bedenk dus welke div je deze opmaak mee geeft. Er kunnen dus complicaties optreden, bedenk dus goed waar je mee bezig bent. Het veiligste is om een beproefde template te gebruiken.

In plaats van een <div class="push"> kan je ook een padding-bottom toepassen. Zie hier. Dit wordt gezien als semantisch mooier.

Op deze site wordt nog weer een andere manier voorgesteld.