Pourquoi « hauteur : 100 % » échoue-t-il sur un élément enfant lorsque son parent a « min-height »/« max-height » mais aucune hauteur explicite ?

Pourquoi la hauteur : 100 % sur un élément enfant ne s'applique-t-elle pas lorsque l'élément parent a une valeur de hauteur minimale/maximale mais aucune valeur de hauteur spécifiée ?

Considérez la configuration HTML et CSS suivante :

<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%;
}

Dans ce scénario, l'élément conteneur s'affiche avec une hauteur de 300 px comme prévu, mais l'élément enfant reste sans aucune hauteur malgré la déclaration height : 100 %.

Cependant, l'ajout d'une petite valeur de hauteur (par exemple, 1px) à l'élément conteneur fait que l'élément enfant remplit soudainement tout le conteneur avec une hauteur de 300px :

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

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

Ce comportement découle de la spécification CSS elle-même. Lorsque la hauteur d'un élément n'est pas explicitement définie, le pourcentage de hauteur sur son enfant échouera. Selon la spécification :

Spécifie un pourcentage de hauteur. Le pourcentage est calculé par rapport à la hauteur du bloc contenant la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c'est-à-dire qu'elle 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 le cas initial, puisque le La hauteur de l'élément conteneur n'est pas explicitement définie, la hauteur de l'élément enfant : 100 % devient « auto ». Cela signifie qu'il prendra autant d'espace que son contenu l'exige, ce qui n'entraînera aucune hauteur visible.

L'ajout d'une valeur de hauteur (même aussi petite que 1 px) à l'élément conteneur définit explicitement sa hauteur, permettant à l'enfant hauteur de l'élément : 100 % pour calculer et appliquer la hauteur correcte.

Par conséquent, le comportement apparemment inattendu vient du fait que la hauteur d'un élément parent doit être explicitement définie pour que ses éléments enfants puissent calculer correctement leurs pourcentages de hauteur.

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!