Pourquoi « hauteur : 100 % » ne fonctionne-t-il pas sur un élément enfant sans hauteur parent lors de l'utilisation de « min-height » ou « max-height » ?

Pourquoi la taille : 100 % sur un enfant ne s'applique pas sans valeur de taille sur le parent avec une taille minimale/maximale

Dans certains scénarios, lorsqu'un enfant l'élément est défini sur hauteur : 100 % et son élément parent a une hauteur min ou Valeur max-height mais pas de valeur height explicite, l'enfant ne peut pas hériter de la hauteur souhaitée. Examinons la raison de ce comportement avec les spécifications HTML, CSS et CSS pertinentes.

Considérez le code HTML et CSS suivant :

<div class="container">
  <div class="child">
  </div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

Problème :

Dans l'exemple ci-dessus, lorsque vous affichez ce document dans un navigateur, vous remarquerez peut-être que l'élément enfant ne remplit pas tout le conteneur. Bien que le conteneur ait une hauteur minimale de 300px et que l'enfant ait une hauteur de 100%, l'élément enfant reste vide (sans aucune hauteur visible).

Explication :

Ce comportement découle de la spécification CSS. La spécification indique que :

"Spécifie un pourcentage de hauteur. Le pourcentage est calculé par rapport à la hauteur du bloc conteneur de la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c'est-à-dire que cela dépend de la hauteur du contenu), et que cet élément n'est pas positionné de manière absolue, la valeur est calculée sur « auto ».

Dans notre cas, la hauteur du conteneur est pas explicitement spécifié. Il est déterminé par son contenu, qui dans ce cas n'est que l'élément enfant. Étant donné que l'élément enfant n'a pas de hauteur explicite (en raison du pourcentage de hauteur), la hauteur du conteneur est essentiellement indéfinie. Par conséquent, le pourcentage de hauteur de l'enfant devient également indéfini.

Pour résoudre ce problème et garantir que l'élément enfant remplit tout le conteneur, vous devez définir explicitement une valeur de hauteur pour le conteneur, comme indiqué dans la modification suivante CSS :

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  height: 1px;
}

En définissant la hauteur du conteneur même sur une petite valeur (dans ce cas, 1px), vous fournissez effectivement une hauteur de référence pour le pourcentage de hauteur de l'élément enfant. Cela permet à l'élément enfant d'hériter correctement de la hauteur du conteneur, garantissant qu'il remplit tout le conteneur.

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!