Pourquoi le pourcentage de hauteur en CSS entraîne-t-il parfois un comportement inattendu ?

CSS : Comprendre les bizarreries du pourcentage de hauteur

En CSS, la propriété height peut être une énigme déroutante lorsqu'il s'agit d'utiliser des valeurs de pourcentage. Contrairement à son homologue, la largeur, qui s'adapte sans effort à la taille d'un élément parent, les valeurs de hauteur en pourcentage entraînent souvent un comportement inattendu.

Le mystère de la hauteur manquante

Considérez le code HTML et CSS suivant :

<div>

#working {
  width: 80%;
  height: 140px;
  background: orange;
}
#not-working {
  width: 80%;
  height: 30%;
  background: green;
}

Alors que la largeur de #working calcule à 80 % de la fenêtre comme prévu, la hauteur de #not-working devient étonnamment 0.

Briser la dépendance

Le nœud de ce problème réside dans la hauteur par défaut des éléments de bloc comme div. Par défaut, la hauteur d'un élément bloc est conforme à la taille de son contenu. Cela crée une boucle de rétroaction :

<div>

Ici, #inner s'agrandit pour s'adapter au paragraphe qu'il contient, tandis que #outer s'agrandit pour s'adapter à #inner.

Les valeurs de hauteur en pourcentage ajoutent une autre couche à cela. relation. Lorsque vous spécifiez un pourcentage de hauteur, par exemple 30 %, il fait référence à la hauteur de l'élément parent. Cependant, la hauteur de l'élément parent est influencée par la hauteur de ses éléments enfants, conduisant à une dépendance circulaire.

La solution

Pour résoudre ce dilemme, la boucle de rétroaction doit être rompue. Ceci peut être réalisé en définissant explicitement la hauteur de l'élément parent, supprimant ainsi sa dépendance vis-à-vis de ses éléments enfants. Par exemple, dans l'exemple ci-dessus, en ajoutant #outer { height: 500px; } fournirait un calcul bien défini pour #outer et #not-working.

En conclusion, bien que les valeurs de pourcentage de largeur fonctionnent de manière transparente en raison de la nature indépendante de la largeur des éléments de bloc, les calculs de pourcentage de hauteur sont intrinsèquement liés au contenu et nécessitent une définition claire de la hauteur pour l'élément parent.

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!