Pourquoi mon élément enfant n'hérite-t-il pas de la hauteur lorsque le parent n'a qu'une « hauteur minimale » ?

Hauteur de l'élément enfant non appliquée avec la hauteur min/max du parent et aucune hauteur explicite

Problème :

Considérez le CSS suivant :

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

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

Même si l'élément enfant a une hauteur définie sur 100 %, il ne prend aucune hauteur lorsque l'élément parent a une valeur min-height mais pas de hauteur explicite. Ce n'est que lorsque la hauteur de l'élément parent est définie sur 1 px que l'élément enfant remplit correctement le conteneur.

Explication :

Dans le premier cas (pas de hauteur explicite pour l'élément parent) parent), le pourcentage de taille de l'enfant échoue car :

Selon la spécification CSS :

"Si la hauteur du Le bloc contenant n'est pas spécifié explicitement (c'est-à-dire qu'il dépend de la hauteur du contenu) et cet élément n'est pas positionné de manière absolue, la valeur est calculée sur « auto ».

Min-height ne fournit qu'une limite minimale, et le la hauteur de l'élément dépend toujours de son contenu.

Pour illustrer, considérons l'exemple modifié suivant :

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

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

Ici, le conteneur définit explicitement un petit remplissage, qui force l'élément enfant à avoir une hauteur maximale inférieure à 300 px. L'animation modifie dynamiquement la taille de l'enfant, démontrant que la taille de l'enfant dépend bien de l'espace disponible et pas uniquement de son réglage en hauteur à 100 %.

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!