max-height CSS propriété

.hauteur-maximale{ 
  height : 90%;
  min-height : 100px;
  max-height : 510px;
}

Règles de syntaxes CSS pour max-height.

max-height spécifie la hauteur maximale de la zone de contenu

La propriété max-height css ne spécifie que hauteur maximale de la zone contenu, cela n'inclue pas les marges intérieures, ni les bordures. Cependant l'utilisation de box-sizing change cette interprétation.

Calcul d'une valeur de max-height en %

La valeur de max-height est calculée en fonction de la valeur spécifiée de la propriété CSS height de son parent. Si la propriété CSS height de son parent n'est pas spécifiée explicitement (autre que auto), alors la hauteur maximale sera calculée comme si elle était a none.

Si l'élément est en position absolue, la valeur est calculée en fonction de la valeur calculée de height additionnée aux valeurs calculées des padding verticaux du parent servant de point d'origine.

Calcul de la hauteur suivant min et max height

Voici comment est calculée la hauteur :

• Calcule de la hauteur sans min-height et max-height.
• Si la valeur calculée de min-height est supérieure à max-height, alors la propriété CSS max-height prend la valeur de min-height.
• Si la nouvelle hauteur calculée est supérieure à la valeur de max-height, alors la propriété CSS height prend la valeur de max-height.
• Si la nouvelle hauteur calculée est inférieure à la valeur de min-height, alors la propriété CSS height prend la valeur de min-height.

Compatibilités navigateurs de la propriété max-height

Equivalence de la CSS max-height en HTML.

La propriété CSS max-height n'a pas d'équivalence en HTML.

Votre avis sur la définition max-height en CSS