Maison > interface Web > tutoriel CSS > Pourquoi mon élément enfant déborde-t-il de son parent alors que les deux ont une « hauteur maximale : 100 % » ?

Pourquoi mon élément enfant déborde-t-il de son parent alors que les deux ont une « hauteur maximale : 100 % » ?

Patricia Arquette
Libérer: 2024-12-14 01:17:10
original
653 Les gens l'ont consulté

Why Does My Child Element Overflow Its Parent Despite Both Having `max-height: 100%`?

Parent débordant d'enfant malgré une hauteur maximale de 100 %

Considérez une situation dans laquelle vous avez un élément enfant avec une hauteur maximale de 100 % à l'intérieur d'un conteneur qui également utilise la hauteur maximale. De manière inattendue, l'élément enfant finit par déborder de l'élément parent.

Comprendre le comportement

Le problème vient du fait que lorsque vous définissez un pourcentage pour la hauteur maximale sur un enfant, il fait référence à un pourcentage de la taille réelle du parent, et non à sa hauteur maximale. Ainsi, lorsque l'élément parent n'a pas de hauteur explicite définie, il n'y a pas de hauteur de base définie pour le calcul de la hauteur maximale de l'élément enfant. Par conséquent, max-height est par défaut "aucun", permettant à l'élément enfant de croître indéfiniment.

Dans ce cas, la seule restriction sur l'enfant est la largeur maximale de son parent. Étant donné que l'image est plus haute que large, elle déborde de la hauteur du conteneur vers le bas pour conserver son rapport hauteur/largeur tout en maximisant sa taille globale.

Solution : hauteur explicite

Pour résoudre ce problème, il vous suffit de fournir une hauteur explicite à l'élément parent. Ce faisant, vous établissez une hauteur de base claire pour le calcul de la hauteur maximale de l'élément enfant. Par conséquent, l'élément enfant sera confiné à la hauteur du parent tout en conservant ses proportions.

Par conséquent, spécifier une hauteur explicite pour l'élément parent garantit que l'élément enfant respecte sa restriction de hauteur maximale, empêchant éviter de déborder du récipient.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal