Une section d'accueil réglée sur height: 100vh occupe parfaitement l'écran dans le simulateur mobile des outils de développement, puis se retrouve coupée en bas une fois testée sur un vrai téléphone, sous la barre d'adresse du navigateur. Ce décalage a longtemps été l'un des pièges les plus signalés du responsive design, et il tient à la façon dont vh était calculé.
Des unités plus récentes, ajoutées justement pour corriger ce problème, permettent aujourd'hui de choisir précisément comment une hauteur doit réagir à l'apparition ou à la disparition de cette barre.
Définition
vh et vw valent chacun un centième de la hauteur, respectivement de la largeur, de la fenêtre visible. vmin prend la plus petite des deux dimensions, vmax la plus grande, ce qui les rend utiles pour une taille qui doit s'adapter aussi bien en orientation portrait que paysage.
.banniere {
height: 100vh; /* toute la hauteur de la fenêtre visible */
width: 100vw; /* toute sa largeur */
font-size: 5vmin; /* s'adapte à la plus petite des deux dimensions */
}Ces unités appartiennent à la grande famille des Unités CSS, aux côtés du pourcentage et du rem, mais elles s'en distinguent sur un point précis : elles se calculent uniquement par rapport à la fenêtre du navigateur, jamais par rapport à un élément parent, ce qui les rend utiles même sur un élément dont le parent n'a lui-même aucune taille définie.
Le piège historique du 100vh mobile
Sur mobile, la barre d'adresse du navigateur apparaît et disparaît selon que la page défile ou non, ce qui change la hauteur réellement visible à l'écran. Les navigateurs ont longtemps calculé 100vh par rapport à la hauteur totale, barre masquée, plutôt que par rapport à la hauteur immédiatement visible, barre affichée. Résultat : une section pensée pour remplir tout l'écran dépassait systématiquement en bas au premier chargement, avant que l'utilisateur ne fasse défiler la page.
Les unités récentes qui corrigent le problème
| Unité | Se base sur |
|---|---|
svh (small viewport height) | La hauteur la plus petite possible, barre d'adresse toujours affichée |
lvh (large viewport height) | La hauteur la plus grande possible, barre masquée : le comportement de l'ancien 100vh |
dvh (dynamic viewport height) | La hauteur réelle du moment, recalculée en direct pendant le défilement |
.banniere {
height: 100vh; /* repli pour les anciens navigateurs */
height: 100dvh; /* remplace la ligne précédente là où c'est supporté */
}dvh recalcule la hauteur en temps réel pendant que la barre d'adresse apparaît ou disparaît, ce qui peut créer un léger mouvement visible pendant le défilement. Pour un contenu qui ne doit jamais bouger, svh reste le choix le plus stable, quitte à laisser un espace vide temporaire quand la barre se cache.Cas d'usage typiques
Une section d'accueil plein écran gagne à utiliser dvh, pour occuper la hauteur réellement visible à tout moment. Un élément critique qui ne doit jamais être coupé, comme un bouton d'action fixé en bas d'écran, gagne au contraire à utiliser svh, la valeur la plus prudente des trois. Ces unités se combinent bien avec aspect-ratio pour des sections qui doivent garder des proportions précises quel que soit l'écran, et servent souvent de seuil à l'intérieur d'une Media query lorsque la mise en page doit changer selon la hauteur visible plutôt que selon la largeur.
Questions fréquentes
100vh et 100% donnent-ils toujours le même résultat ?Non, % se calcule par rapport à la taille du parent, qui peut lui-même ne pas occuper toute la fenêtre si sa propre hauteur n'est pas définie. vh se calcule toujours par rapport à la fenêtre elle-même, indépendamment de la chaîne de parents.
100vh existants par 100dvh ?Pas dans l'urgence, mais c'est recommandé pour les sections plein écran affichées sur mobile. La bonne pratique consiste à garder height: 100vh; en premier comme repli, puis à ajouter height: 100dvh; juste après : un navigateur qui ne reconnaît pas cette valeur ignore simplement la ligne, sans casser la précédente.
Oui, largement, sur les navigateurs modernes depuis plusieurs années. Garder tout de même un repli en vh classique reste une bonne habitude pour les visiteurs sur un navigateur plus ancien.