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.

Valeur initiale	`none`
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ée	non
Pourcentages	Le 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`.
Média	visuel
Valeur calculée	le pourcentage comme spécifié ou la longueur absolue ou le mot-clé `none`
Animable	oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction `calc()` qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction `calc()` interpole chaque moitié comme un nombre réel.
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

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 minimale fixée. Voir <length> pour les unités qu'on peut utiliser.
<percentage>: La hauteur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Si la hauteur de bloc englobant n'est pas définie explicitement, la valeur sera considérée comme zero. Voir la page <percentage> sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
none: Il n'y pas de limite à la hauteur que peut prendre la boîte.
max-content: La hauteur intrinsèque préférée.
min-content: La hauteur intrinsèque minimale.
fill-available: 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: Un synonyme pour max-content.

Syntaxe formelle

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

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

Spécifications

Spécification	État	Commentaires
CSS Intrinsic & Extrinsic 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`.
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.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	1.0	1.0 (1.7 ou moins)	7.0	7.0	1.0
Applicable sur `<table>` [1]	Pas de support	(Oui)	Pas de support	(Oui)	Pas de support
`max-content`, `min-content` et `fit-content`	Pas de support [3]	3.0 (1.9)-moz [2]	Pas de support	Pas de support	9[3](bug)
`fill-available`	Pas de support	Pas de support bug 527285	Pas de support	Pas de support	Pas de support

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	?	?	?	?	?
Applicable sur `<table>` [1]	?	?	?	?	?
`max-content`, `min-content` et `fit-content`	?	?	?	?	9[3](bug)
`fill-available`	?	?	?	?	?

[1] CSS 2.1 ne définissait pas, de façon explicite, le comportement de max-height pour <table>. Ainsi, n'importe quel comportement à cet égard est conforme à CSS 2.1. Les prochaines spécifications CSS pourront apporter une définition plus précises et il est donc conseillé aux auteurs de ne pas faire de suppositions.

[2] Gecko implémente de façon expérimentale les définitions données avec la spécification CSS3 sur les boîtes basiques (CSS3 Basic Box). Celle-ci définit les valeurs available et not fill-available. La définition de la valeur fit-content est également plus simple que celle de CSS3 Intrinsic.

[3] WebKit implémente une ancienne version de la spécification avec le mot-clé intrinsic.