Comment dimensionner une balise div à 100% de la hauteur de la fenêtre du navigateur en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-06-15 17:23:56

Question

Comment puis-je dimensionner une balise div à 100% de la hauteur de la fenêtre du navigateur en HTML et CSS ?

Réponse

Pour dimensionner une balise <div> pour qu'elle occupe toute la hauteur de l'écran, en HTML et CSS, vous pouvez utiliser la propriété CSS height avec une valeur exprimée en vh, et wh pour la largeur de la page.

Une valeur exprimée en vh représente la hauteur de la fenêtre. La fenêtre fait référence à la taille de la fenêtre du navigateur. Ainsi, lorsque vous utilisez vh comme unité, la hauteur de l'élément est ajustée par rapport à la hauteur de la fenêtre du navigateur.

Voici un exemple pour définir la hauteur d'une balise <div> à 100% de la fenêtre du navigateur :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment dimensionner une balise div à 100% de la hauteur de la fenêtre du navigateur en HTML et CSS ?</title>
<style> 
#exemple { 
height: 100vh; 
width: 100vw;         
background-color: red; 
} 
</style> 
</head>  
<body> 
<div id="exemple"></div>
</body>
</html>