Pourquoi « hauteur : 100 % » ne fonctionne-t-il pas sur un élément enfant lorsque le parent n'a que « min-hauteur » ?

Pourquoi la taille de l'enfant échoue malgré 100 % lorsque le parent n'a qu'une hauteur minimale/maximale

Dans l'extrait HTML donné, l'élément conteneur parent avec une hauteur minimale : 300px et aucune valeur de hauteur explicite entraîne l'échec de la hauteur de l'élément enfant : 100 %.

Comprendre le Comportement

Selon la spécification CSS :

"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é explicitement (c'est-à-dire que cela dépend de la hauteur du contenu), et cet élément n'est pas positionné de manière absolue, la valeur est calculée pour 'auto.'"

Dans le scénario fourni, la hauteur de l'élément conteneur n'est pas explicitement définie. Au lieu de cela, il est déterminé en fonction de son contenu et de la valeur de hauteur minimale. Par conséquent, la hauteur de l'élément enfant : 100 % ne peut pas être calculée avec précision.

Exiger une hauteur explicite

Lorsqu'une valeur de hauteur est définie sur le conteneur, même aussi petite que 1 px, elle est explicitement définit la hauteur du bloc conteneur. Cela permet à la hauteur de l'élément enfant : 100 % de calculer et d'appliquer correctement, en remplissant tout le conteneur même sans définition de hauteur explicite.

Approche alternative

Si le comportement souhaité est que l'élément enfant se remplisse l'élément parent entier, quelle que soit la hauteur du parent, une approche alternative consiste à utiliser CSS flexbox comme :

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  height: 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!