Comment faire un div qui prend toute la hauteur de l'écran ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-01-17 17:18:45

Question

Comment faire pour qu'une balise HTML <div> prenne toute la hauteur de l'écran ?

Réponse

Pour qu'une balise HTML <div> prenne toute la hauteur, vous devez utiliser les propriétés CSS top, left, bottom et right, avec une valeur à 0.

Si vous utilisez la propriété height avec une valeur à 100% ou bien même avec une valeur exprimée en vh, vous obtiendrez un décalage liée à la barre de scroll, ou bien aux barres des menus du navigateur.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment faire un div qui prend toute la hauteur de l'écran ?</title>
<style> 
#exemple {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;      
background-color: green; 
} 
</style> 
</head>  
<body> 
<div id="exemple"></div>
</body>
</html>