Appliquer une hauteur de 100% à un élément

Astuce par (Eleveur de kiwiz, Strasbourg)
Mis à jour le . 21774 lectures.
Tags : css, hauteur, height

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.

Un bloc 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>
    <div id="global">...</div>
  </body>
</html>

(Le code HMTL est volontairement simplifié.)

Pour que div#global prenne la hauteur du viewport, il faudra utiliser le code suivant:

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#global {
  height: 100%;
}

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 div#global, à la place de height. Par contre, si vous faites cela pour body, l'astuce ne fonctionnera plus.

Voir dans les ressources liées à cette astuce deux articles complémentaires sur le sujet.

Ressources