Pourquoi le pourcentage de hauteur ne fonctionne-t-il pas en CSS comme le pourcentage de largeur ?

Pourcentage de hauteur en CSS : débloquer le puzzle

L'une des énigmes courantes rencontrées lors de l'utilisation de CSS est l'écart entre les valeurs de pourcentage pour la largeur et hauteur. Bien que les valeurs en pourcentage pour la largeur fonctionnent comme prévu, il n'en va pas de même pour la hauteur.

Imaginez que vous ayez deux éléments : #working et #not-working, chacun avec une valeur en pourcentage spécifiée pour la largeur et la hauteur. L'élément #working se comporte comme prévu : sa largeur est de 80 % de la fenêtre. Cependant, la hauteur de l'élément #non fonctionnel reste à 0, bien qu'elle soit réglée à 30 %.

La nature des éléments de bloc

Pour comprendre cette énigme, nous avons besoin pour approfondir la nature des éléments de bloc en CSS. Par défaut, les éléments de bloc, tels que

, déterminent leur hauteur en fonction de leur contenu. Cela signifie que leur hauteur s'agrandit pour s'adapter à la taille du contenu inclus.

La relation parent-enfant

Lors de la définition de la hauteur d'un élément de bloc à l'aide d'une valeur en pourcentage , nous faisons référence au conteneur parent de l'élément. Dans l'élément #not-working, le parent est la fenêtre, qui n'a pas de hauteur spécifique définie. En conséquence, il existe une boucle de rétroaction sans fin entre le parent et l'enfant, et la taille ne peut pas être déterminée avec précision.

Briser la boucle de rétroaction

Pour surmonter ce problème et permettre au pourcentage de hauteur de fonctionner correctement, nous devons rompre la boucle de rétroaction en fournissant à l'élément parent une hauteur spécifique. Cela fournit un point de référence fixe pour calculer le pourcentage de hauteur de l'élément enfant.

En résumé, les valeurs de pourcentage pour la hauteur en CSS nécessitent que l'élément parent ait une hauteur définie pour éviter toute ambiguïté et permettre des calculs précis. Sans hauteur parent fixe, la hauteur de l'élément enfant reste 0.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css for while require break using function default this viewport issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn