Hauteur CSS : quand utiliser « 100 % » ou « auto » ?

Navigation dans les propriétés CSS Height : « 100 % » contre « auto »

Dans une récente interview, vous avez été confronté à une question concernant la distinction entre les propriétés CSS « hauteur : 100%' et 'hauteur : auto'. Examinons les nuances de ces propriétés pour clarifier leurs différences :

'hauteur : 100%'

Lorsque vous définissez la 'hauteur' d'un élément à 100%, cela implique que l'élément occupera 100 % de la hauteur de son conteneur parent. En d'autres termes, l'élément s'étirera pour s'adapter à la hauteur de son parent.

'height: auto'

Au contraire, 'height: auto' donne à l'élément la flexibilité d'ajuster sa hauteur de manière dynamique . Cela permet à l'élément de prendre une hauteur adaptée à son contenu. La hauteur de l'élément s'ajustera automatiquement en fonction de la hauteur de ses éléments enfants, le cas échéant.

Voici une illustration visuelle pour clarifier davantage ces concepts :

'hauteur : 100 %' Exemple :

<div>

Dans cet exemple, le 'innerDiv' aura une hauteur égale à la hauteur du div parent, qui est 50px.

'height: auto' Exemple :

<div>

Dans cet exemple, le 'innerDiv' aura une hauteur de 10px, s'adaptant à la taille de son enfant 'evenInner'.

En employant 'hauteur : 100 %', vous pouvez vous assurer qu'un élément remplit la hauteur de son parent, tandis que « hauteur : auto » offre de la flexibilité et ajuste la hauteur de l'élément en fonction de son contenu ou de ses enfants.

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!