Pourquoi ma hauteur de pourcentage CSS ne fonctionne-t-elle pas ?

Le pourcentage de hauteur CSS ne fonctionne pas

Lorsque vous essayez de spécifier la hauteur d'un élément sous forme de pourcentage, il peut ne pas s'afficher comme prévu. En effet, le pourcentage de hauteur est relatif à son élément parent. Par conséquent, il est crucial de définir la hauteur de tous les éléments parents à 100 %.

Dans l'extrait de code fourni :

<div>
<p>Le problème vient de l'absence de déclaration de hauteur pour le éléments parents, à savoir les éléments body et html. Sans cette déclaration, le pourcentage de hauteur du div est interprété par rapport à la hauteur par défaut de son parent, qui n'est généralement pas définie.</p>
<p>Pour résoudre ce problème, définissez explicitement la hauteur des éléments body et html sur 100 % , en s'assurant qu'ils occupent toute la fenêtre d'affichage :</p>
<pre class="brush:php;toolbar:false">html, body { height: 100%; width: 100%; margin: 0; }

En définissant les éléments html et body à 100 % de hauteur, l'élément div est désormais capable de calculer correctement sa hauteur en fonction de la hauteur de son parent, qui représente désormais 100 % de la fenêtre d'affichage. En conséquence, le div s'affichera correctement avec sa hauteur couvrant toute la hauteur de la fenêtre du navigateur.