Sur cette page, vous apprendrez comment fixer la hauteur d'un div à 100% à l'aide de CSS simplement en définissant également la hauteur à 100% pour les éléments parents.
Si vous essayez de définir la hauteur d'un conteneur div à 100% de la fenêtre du navigateur en utilisant la propriété height : 100 %, cela ne fonctionnera pas, car le pourcentage (%) est une unité relative et la hauteur résultante dépend donc de la hauteur de l'élément parent.
Par exemple, si vous considérez l'exemple suivant, le div ".container" a deux éléments parents : l'élément <body> et l'élément <html>. Et nous savons tous que la valeur par défaut de la propriété height est auto, donc si nous définissons également la hauteur des éléments <body> et <html> à 100%, la hauteur résultante du div ".container" devient égale à la hauteur de 100% de la fenêtre du navigateur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style>
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: lightblue;
}
</style>
</head>
<body>
<div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>
Résultat
Et c'est tout pour ce qui est de comment fixer la hauteur d'un div à 100% à l'aide de CSS.
