Pourquoi la division de mon enfant ne remplit-elle pas la hauteur à 100 % lorsque le parent n'a qu'une « hauteur min » ?

Calculs de hauteur et de pourcentage dans les éléments parent-enfant

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

La taille de l'enfant ne répond pas

Quand l'élément conteneur a une valeur min-height, la hauteur de l'élément enfant reste 0 malgré la spécification de 100 %. Cependant, définir la hauteur de l'élément conteneur même à une petite valeur comme 1px permet à l'élément enfant de remplir le conteneur.

Comprendre le comportement

La raison de cela le comportement réside dans la nature des calculs de hauteur en CSS. Lorsqu'un élément parent n'a pas de hauteur explicitement définie (comme dans le cas de min-height), sa hauteur est déterminée par son contenu. Dans ce cas, son contenu est l'élément enfant.

Cependant, la hauteur de l'élément enfant, fixée à 100%, est calculée par rapport à la hauteur de son bloc conteneur. Comme le bloc conteneur (l'élément parent) n'a pas de hauteur explicitement spécifiée, la hauteur de l'élément enfant ne peut pas être calculée.

Définir la hauteur de manière explicite

Définir la hauteur de l'élément parent, même à une petite valeur, fournit une hauteur définitive pour le bloc conteneur. Cela permet à l'élément enfant de calculer sa hauteur à 100 % de la hauteur du parent.

À retenir :

Les calculs de hauteur en pourcentage nécessitent une hauteur explicitement définie pour le bloc conteneur. . Dans les cas où le bloc conteneur a une valeur min-height/max-height mais aucune valeur de hauteur, la hauteur de l'élément enfant ne sera pas appliquée tant que la hauteur du bloc conteneur n'est pas explicitement définie.

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!