16 Augustus 2009

Een pagina met volledige hoogte is best een uitdaging in semantische html. Onderaan komt dan de footer. Maar dan komt het probleem.

Probleemstelling

Als je de footer onderaan het venster absolute positioneert, dan blijft deze altijd zichtbaar en scrolt de rest eronder door. Persoonlijk vind ik dit het mooist op een pagina, maar de meerderheid is dat niet met mij eens ;)

Oké, dan plakken we de footer dus onderaan de inhoud. Maar wat doe je dan als je pagina klein is. Dan komt je footer dus omhoog. En dat is geen gezicht.

De oplossing

Gelukkig zijn wij niet de eerste die hier tegenaan zijn gelopen. Een leuke oplossing vonden we in een artikel van GigaDesign.be:
Layout met 100% hoogte

In het artikel kun je vinden hoe je een wrapper maakt die meeloopt met de hoogte van je pagina. Door de moderne 'min-height' van CSS2 krijgt de wrapper minimaal de hoogte van het venster.

De truck!

De footer-div moet met bottom:0 onderaan de container vastgeplakt worden. Om ervoor te zorgen dat de tekst/inhoud van de pagina niet onder de footer terecht komt geef je de inhoud-div een padding die iets groter is dan de hoogte van de footer.

Bekijk:

• Eenvoudig voorbeeld van GigaDesign

Alternatieven

Op ryanfait.com wordt een iets andere variant beschreven. Hier staat de footer-div buiten de wrapper.

Ook in deze site?

Nee, deze truuk heb ik niet meer in deze site toegepast. Al doende leert men. De template bleek nog met een tabelstructuur te zijn. De linkerkolom heb ik absolute gepositioneerd. Dat ging dus fout met de footer.

Bovengenoemde oplossing heb ik gaandeweg gevonden, maar het koste teveel tijd om de layout nog om te bouwen. :-(
Ook was het niet echt belangrijk, omdat de pagina's toch lang genoeg zullen worden.