Différence entre la hauteur CSS Top 100% vs hauteur automatique

"Hauteur: 100%"Définit la hauteur des conteneurs Child Div en fonction de celui du conteneur parent. Cette valeur de propriété définit la hauteur de l'enfant exactement égal à la hauteur définie dans l'élément parent. Mais quand "Hauteur: Auto"Est utilisé pour un élément, il définira la hauteur de sa valeur d'éléments enfants plutôt que d'hériter de la valeur de l'élément parent.

Ce blog différenciera les CSS «Hauteur: 100%» et «Hauteur: Auto».

Comment fonctionne la «hauteur: 100%» en HTML?

Définir n'importe quel nombre de pourcentages comme la hauteur de l'élément enfant ajustera la hauteur en conséquence. Ainsi, une hauteur de 100% définira la hauteur de l'élément enfant de telle manière qu'il couvre pleinement la zone de l'élément parent. Par exemple, la définition du «hauteur"De l'élément enfant à"50%»(Hauteur: 50%) Réglera la hauteur de l'élément enfant comme la moitié de son élément parent.

Exemple: appliquer une propriété «hauteur: 100%» à une image
Comprenons l'application de la hauteur: 100% dans un code HTML:

Dans l'extrait de code ci-dessus:

• Pour l'élément DIV, la valeur de la propriété CSS High est définie comme «200px".
• À l'intérieur de la div, il y a un «IMG”Élément défini comme l'élément enfant de l'élément de conteneur DIV ci-dessus. Sa hauteur est réglée sur «100%"(Hauteur: 100%). Cela signifie que la hauteur de l'image sera définie en fonction de la valeur de pixel définie dans le conteneur de div parent, je.e., "200px".

Cela générera la sortie suivante:

Maintenant, si nous modifions la valeur de la propriété de hauteur dans l'élément Parent Div (par exemple, de 200px à 300px), il définira la taille de l'image sur «300px»:

Cela changera la hauteur de l'image en «300px»Et l'image sera affichée comme ceci:

Comment fonctionne la propriété «Hauteur: Auto» en HTML?

Le "Hauteur: Auto»La propriété définit la hauteur de l'élément enfant à la valeur définie dans cet élément enfant. Par exemple, s'il y a un élément parent qui a la hauteur "300px"Et il a un élément enfant avec" Hauteur: Auto ". Ensuite, à l'intérieur de cet élément (contenant «Hauteur: Auto»), tous les éléments enfants auront la hauteur selon la définition. Plus précisément, l'élément enfant n'héritera pas de la valeur de l'élément parent.

Exemple: application de la propriété «Hauteur: Auto» à une image
Comprenons cela avec un exemple d'extrait de code HTML simple:

Dans l'extrait de code ci-dessus:

• Ici, nous avons ajouté un élément de conteneur Div avec l'attribut de style et la propriété CSS en ligne comme «hauteur: 300px".
• À l'intérieur de l'élément de conteneur Div, il y a un autre conteneur DIV avec la propriété de style CSS définie comme «auto".
• À l'intérieur du deuxième élément div, un «IMG"L'élément est ajouté (enfant de l'élément div ci-dessus). Il a l'attribut de style avec la propriété Height avec la valeur définie sur «250px".
• Cela signifie que la hauteur de l'image sera définie sur «250px» car son élément parent a «Hauteur: Auto».

Sortir

Maintenant, si nous modifions la valeur du «hauteur”Propriété de l'enfant Div, il modifiera également la hauteur de l'image dans la sortie en conséquence:

Cela définira la hauteur de l'image comme «150px«Dans la sortie:

Cela résume la différence entre CSS "Hauteur: 100%" Contre "Hauteur: Auto".

Conclusion

Le CSS "Hauteur: 100%»Définit la hauteur de l'élément exactement comme celle définie dans son élément parent. D'un autre côté, quand le «Hauteur: Auto«Est utilisé dans un élément, il définit la hauteur de ses éléments enfants tels que définis dans les éléments enfants et il n'hérite pas de la hauteur de l'élément parent. Ce post a discuté de la différence entre CSS «Hauteur: 100%» et la «hauteur: auto».