Pourquoi le pourcentage de hauteur ne fonctionne-t-il pas comme prévu en CSS ?

Pourquoi la hauteur en pourcentage ne fonctionne-t-elle pas en CSS ?

Comprendre le comportement inhérent des éléments de bloc en CSS est crucial lorsque l'on travaille avec un pourcentage. dimensions basées. Alors que les largeurs en pourcentage fonctionnent comme prévu, les hauteurs en pourcentage présentent un comportement paradoxal qui peut laisser les développeurs perplexes.

Détermination de la hauteur par défaut

Par défaut, la hauteur d'un élément de bloc est déterminé par son contenu. En d’autres termes, l’élément s’étendra verticalement pour s’adapter à la hauteur requise par son contenu. Ceci est différent de la propriété width, qui étend intrinsèquement l'élément horizontalement pour remplir l'espace disponible au sein de son parent.

Le paradoxe du pourcentage

Lorsqu'un pourcentage est utilisé pour définir la hauteur d'un élément, cela signifie un pourcentage de la hauteur de l'élément parent. Cependant, comme la hauteur de l'élément parent dépend souvent de la hauteur de ses éléments enfants, une boucle de rétroaction est créée. Définir la hauteur de l'élément enfant sur un pourcentage ne fournit pas de valeur concrète avec laquelle travailler, car cela dépend de la taille du parent, qui à son tour dépend de la taille de l'enfant. Ce cycle empêche l'établissement d'une dimension bien définie.

Hauteurs basées sur le contenu

Contrairement aux largeurs, qui sont indépendantes du contenu, les hauteurs sont directement influencées par le contenu que contient un élément. Cette dépendance rend essentiel la fourniture d'une valeur de hauteur spécifique pour l'élément parent, rompant ainsi la boucle de rétroaction et fournissant un point de référence concret pour le pourcentage de hauteur de l'élément enfant.

Exemple à illustrer

Considérez le code suivant :

<div>

#inner {
  height: 50%;
}

Dans cet exemple, la hauteur de #inner dépendra de la hauteur de #outer. Cependant, la hauteur de #outer dépend également de la hauteur de #inner. Sans spécifier de hauteur pour #outer, la boucle de rétroaction empêchera #inner d'avoir une hauteur bien 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!