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

Je n'ai jamais compris la différence entre height:100% et height:auto Récemment, j'ai utilisé height:100%;overflow:hidden; problèmes. Mais changez-le simplement en height:auto. Baidu n'a jamais examiné ce problème en détail.

Le même problème est revenu aujourd'hui. Après un examen plus approfondi de Baidu et les conseils d'amis du groupe, j'ai finalement compris la raison et je l'ai enregistré.

height:auto fait référence à l'ajustement automatique de la hauteur en fonction du contenu du bloc.
hauteur : 100 % fait référence à la hauteur définie par rapport à la hauteur du bloc parent, c'est-à-dire que la hauteur est définie en fonction de la hauteur du calque parent le plus proche et avec une hauteur définie.

se développe automatiquement en fonction de la hauteur du contenu. 100 % est déterminé en fonction de la hauteur de l'élément parent. Par exemple :

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>

<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div> </div>

Par exemple, si une table est à l'intérieur d'une autre table, si la hauteur de la table externe est de 100 et que la table interne est auto, s'il n'y a rien dans la table, il n'aura pas de hauteur. La hauteur du contenu dans le tableau est aussi haute qu'elle est. Lorsqu'il est à 100%, peu importe qu'il y ait du contenu dedans ou non, c'est la même hauteur que le tableau à l'extérieur

.

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!