Faire un bloc qui utilise toute la hauteur de la fenêtre semble être un mission plus périlleuse qu'il n'y parait.
Par définition, une valeur en pourcentages s'applique par rapport à une référence. Par exemple: si un conteneur n'a pas de hauteur et qu'il contient un div en height: 100%… normalement ce div n'a pas de hauteur puisque celle de son parent n'est pas déterminée.
Body prenant 100% de la hauteur du viewport
Le viewport est la zone de visualisation du navigateur. La hauteur du viewport peut être supérieure à la hauteur du contenu (si le contenu est court), ou bien inférieure à cette hauteur (si le contenu est long, et dans ce cas on voit apparaitre une barre de défilement vertical).
Prenons une page web avec un conteneur global:
<html>
<body>
ici du contenu
</body>
</html>(Le code HMTL est volontairement simplifié.)
Pour que le corps de page body prenne la hauteur du viewport, il faudra utiliser le code suivant:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
Comprenez que chaque élément de la branche doit avoir une hauteur explicite. En clair, il faut que chaque élément, en remontant jusqu'à l'élément html, ait un référent pour sa hauteur en pourcentages. Le référent de l'élément html, c'est la zone de visualisation du navigateur. Et voilà.
Notez qu'il sera sans doute plus intelligent d'utiliser min-height pour body, à la place de height. pour permettre le contenu supplémentaire de ne pas déborder du corps de page :
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
Voir dans les ressources liées à cette astuce deux articles complémentaires sur le sujet.
Plus simple pour les navigateurs modernes
Pour les navigateurs "modernes" (en clair depuis IE9 inclus), CSS3 propose une solution encore bien meilleure via les unités de viewport.
Du coup, grâce à l'unité vh (pour "viewport height"), il devient inutile d'appliquer une hauteur de 100% à chacun des ancêtres de notre élément. Ce bout de code devient amplement suffisant:
div {
min-height: 100vh;
}
Avouez que c'est bien plus simple !