max-height

La propriété max-height est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété height de devenir supérieure à la valeur spécifiée par max-height (autrement dit, max-height est une borne supérieure pour height).

La valeur de max-height surcharge la valeur de height mais elle est surchargée par min-height.

Syntaxe

/* Valeur de longueur */
/* Type <length>      */
max-height: 3.5em;

/* Valeurs relatives */
/* Type <percentage> */
max-height: 10%;

/* Valeurs avec un mot-clé */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Valeurs globales */
max-height: inherit;
max-height: initial;
max-height: unset;

Valeurs

<length>
La hauteur maximale fixée, exprimée comme une valeur absolue. Voir <length> pour les unités qu'on peut utiliser.
<percentage>
La hauteur maximale fixée, exprimée comme un fraction de la hauteur du bloc englobant. Voir la page <percentage> sur les valeurs possibles avec ce type.
none
Il n'y pas de limite à la hauteur que peut prendre la boîte.
max-content This is an experimental API that should not be used in production code.
La hauteur intrinsèque préférée.
min-content This is an experimental API that should not be used in production code.
La hauteur intrinsèque minimale.
fill-available This is an experimental API that should not be used in production code.
La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.
fit-content This is an experimental API that should not be used in production code.
Un synonyme pour max-content.

Syntaxe formelle

none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)


<length-percentage> = <length> | <percentage>

Exemples

HTML

<div> Lorem ipsum tralala sit amet, consectetur adipisicing
  <p>
     Ut enim ad minim veniam, quis nostrud exercitation
     ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

CSS

div {
  height: 250px;
  border: solid 1px red;
}

p {
  max-height: 30%;
  border: solid 1px blue;
}

Résultat

Accessibilité

Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-height ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

Spécifications

Spécification État Commentaires
CSS Box Sizing Module Level 3
La définition de 'max-height' dans cette spécification.
Version de travail Ajout des mots-clés max-content, min-content, fit-content et fill-available. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci.
CSS Transitions
La définition de 'max-height' dans cette spécification.
Version de travail max-height peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'max-height' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenone
Applicabilitétous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableaux et les groupes de colonnes
Héritéenon
PourcentagesLe pourcentage est par rapport à la hauteur de la boîte générée par le bloc contenant. Si la hauteur du bloc contenant n'est pas explicitement spécifiée (c'est-à-dire qu'elle dépend de la hauteur du contenu), et si cet élément n'est pas absolument positionné, la valeur du pourcentage est traitée comme si elle valait none.
Valeur calculéele pourcentage comme spécifié ou la longueur absolue ou le mot-clé none
Type d'animationune longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi