Quelle est la différence entre CSS « hauteur : auto » et « hauteur : 100 % » ?

Comprendre les différences subtiles entre « hauteur : auto » et « hauteur : 100 % » en CSS

Lorsque vous stylisez des éléments avec CSS, le les propriétés « hauteur : auto » et « hauteur : 100 % » peuvent être utilisées pour contrôler la dimension verticale d'un élément. Cependant, comprendre leurs comportements distincts est crucial pour obtenir les résultats souhaités.

'hauteur : 100 %'

Lorsque « hauteur : 100 % » est appliquée à un élément, il hérite de l'espace vertical de son conteneur parent. Autrement dit, il s'étire et se contracte en fonction de la taille du parent.

Par exemple, si vous avez un

avec une hauteur de 500px et appliquez « hauteur : 100 % ; » à son élément enfant 'innerDiv', 'innerDiv' aura également une hauteur de 500px.

'height: auto'

En revanche, 'height: auto' définit la hauteur de l'élément à sa taille intrinsèque. Cela signifie qu'il s'adaptera au contenu qu'il contient, permettant aux éléments enfants d'influencer sa dimension.

Par exemple, si nous ajoutons un autre élément enfant 'evenInner' à 'innerDiv' avec une hauteur de 10px, 'innerDiv' ajustera automatiquement sa hauteur à 10px, quel que soit celui de son conteneur parent hauteur.

Exemples :

<div>
<p>Dans ce cas, 'innerDiv' aura une hauteur de 500px car il hérite de son parent.</p>
<pre class="brush:php;toolbar:false"><div><p>Ici, 'innerDiv' aura une hauteur de 10px car son élément enfant 'evenInner' nécessite cet espace.</p></div>