Maison > interface Web > tutoriel CSS > Quelle est la différence entre « hauteur : 100 % » et « min-hauteur : 100 % » lors de la définition de la hauteur d'un div en CSS ?

Quelle est la différence entre « hauteur : 100 % » et « min-hauteur : 100 % » lors de la définition de la hauteur d'un div en CSS ?

Mary-Kate Olsen
Libérer: 2024-10-31 10:57:01
original
953 Les gens l'ont consulté

What's the difference between `height: 100%` and `min-height: 100%` when setting a div's height in CSS?

Hauteur : 100 % vs. Hauteur minimale : 100%

Question :

Lors de la définition de la hauteur d'un div à l'aide de CSS, quelle est la distinction entre « hauteur : 100 % » et "min-height:100%" ?

Réponse :

Le World Wide Web Consortium (W3C) définit la relation entre ces deux propriétés comme suit :

  1. La hauteur initiale du div est déterminée sans tenir compte de la "hauteur min" et "hauteur-max."
  2. Si la hauteur initiale dépasse "hauteur-max", recalculez la hauteur en utilisant "hauteur-max" comme hauteur calculée.
  3. À l'inverse, si la hauteur résultante est inférieur à "hauteur min", recalculez la hauteur en utilisant "hauteur min" comme valeur calculée hauteur.

Résumé :

  • "Min-height" remplacera la hauteur calculée si elle est supérieure, quelle que soit la hauteur spécifiée.
  • "Max-height" peut annuler la hauteur spécifiée si elle est inférieure, mais il ne peut pas annuler "min-height."

Cas spécifique :

  • "Height:100%" définit la hauteur de l'élément égale à la hauteur du bloc conteneur.
  • "Min-height:100%" garantit que la hauteur est d'au moins 100%, même si une hauteur inférieure est explicitement précisé. Notez qu'il ne peut pas être remplacé par "max-height".

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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal