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

Comprendre le pourcentage de hauteur en CSS

En CSS, une valeur en pourcentage pour la largeur fonctionne comme prévu, mais il n'en va pas de même pour la hauteur. Pour comprendre ce comportement, nous devons examiner les calculs de hauteur par défaut des éléments de bloc.

Calcul de la hauteur par défaut :

La hauteur d'un élément de bloc est déterminée par son contenu. . Si l'élément contient du texte, des images ou d'autres éléments de bloc, sa hauteur augmentera pour s'adapter au contenu.

Pourcentage de largeur par rapport au pourcentage de hauteur :

Lorsque vous spécifiez une largeur en pourcentage, la largeur de l'élément est calculée en pourcentage de la largeur de son parent. Étant donné que les éléments de bloc sont intrinsèquement aussi larges que leur parent, ce calcul donne une valeur bien définie en pixels.

Cependant, la hauteur d'un élément de bloc dépend de son contenu. Spécifier la hauteur : 50 % crée une ambiguïté car il n'est pas clair ce que devrait être 50 % de la hauteur du parent lorsque le propre contenu de l'élément peut potentiellement faire varier sa hauteur.

Briser la boucle de rétroaction :

Pour résoudre cette ambiguïté, vous devez briser la boucle de rétroaction entre le parent et l'enfant. Cela peut être fait en spécifiant explicitement la hauteur de l'élément parent.

Par exemple :

#parent {
  height: 200px;
}
#child {
  height: 50%;  /* Now calculates 50% of #parent's height */
}

En fournissant une hauteur spécifique pour le parent, la hauteur de l'élément enfant peut désormais être calculée comme une hauteur définie pourcentage, ce qui fait fonctionner efficacement la hauteur du pourcentage.

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!