Wat velen willen, maar niet lukt

Iets wat velen reeds hebben gevraagd via e-mail en wat ook veel ter sprake komt op verschillende forum’s, maar wat weinigen weten:

Hoe maak je een pagina die 100% hoog is - dus de gehele viewpoint in beslag neemt - terwijl er eigenlijk weinig tekst of inhoud in staat ?

Eén van de oplossingen hiervoor is min-height, maar natuurlijk, - daar hoor je de de lange baard weer aankomen - het werkt niet crossbrowser, ik hoef hier geen verwijzing te maken.

Met header én footer ?

Maar natuurlijk, met de nodige know-how kan je alles verwezenlijken. Om met header én footer 100% hoogte te hebben moet men eerst een container aanmaken waarin de header en footer zich bevinden.

<div id=”container”>
<h1>Header</h1>
<div id=”inhoud”>
…
</div>
<div id=”footer”>Footer</div>
</div>

De truckendoos geopend

Om nu 100% hoogte te hebben moeten we verschillende dingen doen, ten eerste gaan we body en HTML aanspreken, daar deze de parents zijn van onze #container:

html, body {
height: 100%; /* héél belangrijk */
}

Daarna zeggen we met een IE specifieke manier dat de container ook 100% moet zijn met een klein truckje:

#container {
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}

min-height word niet ondersteund door IE, daarom dat we nadien - laatste regel - nog eens de waarde in IE-taal vastzetten, moderne browser zullen voorrang geven aan de voorlaatste regel en deze ook waarachtig uitvoeren, daarmee halen we het voordeel voor IE nadien nog eens te bepalen.

De footer

Met de footer moeten we ook iets speciaal doen, het zal je misschien zijn opgevallen dat er position: relative in de #container staat, dus kunnen we nu de footer absolute positioneren, als je niet weet waarover ik het heb lees dan het artikel: Het absolute relatief maken.
Door deze methode toe te passen kunnen we de footer ook echt helemaal onderaan zetten, deze trekt dan als het ware de #container naar onderen.

#footer {
position: absolute;
bottom: 0; /* heel belangrijk */
}

En natuurlijk kun je een echt online voorbeeld van dit alles bekijken, dat je ziet dat ik hier gene zever in pakskes verkoop.