Hauteur CSS : « 100 % » vs « auto » – Quelle est la vraie différence ?

Comprendre la différence entre CSS height : 100% et height : auto

En CSS, la propriété height définit la dimension verticale d'un élément . Cependant, les valeurs qui lui sont attribuées peuvent conduire à des résultats différents :

hauteur : 100%

Cette valeur fixe la hauteur d'un élément à 100% de la hauteur de son conteneur parent. En d'autres termes, l'élément remplit tout l'espace vertical disponible au sein de son parent.

hauteur : auto

auto indique que la hauteur d'un élément doit être calculée automatiquement en fonction sur la taille de son contenu. Cette valeur est souvent utilisée lorsque le contenu est dynamique et que sa hauteur peut varier.

Exemples de clarification

Pour illustrer davantage la différence :

Exemple 1 : hauteur : 100%

<div>

Dans cet exemple, l'extérieur div a une hauteur fixe de 50px. L'attribution de height : 100 % au div interne l'amène à remplir la totalité des 50 px de son conteneur parent.

Exemple 2 : height : auto

<div>

Dans ce Par exemple, le div externe a à nouveau une hauteur de 50 px. Puisque le div interne a height: auto, il ajuste sa hauteur pour s'adapter à son contenu, qui dans ce cas est le deuxième div avec une hauteur de 10px. Par conséquent, le div interne aura une hauteur de 10px.

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!