max-height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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).

Exemple interactif

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

Syntaxe

css

/* 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 Expérimental: La hauteur intrinsèque préférée.
min-content Expérimental: La hauteur intrinsèque minimale.
fill-available Expérimental: 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 Expérimental: Un synonyme pour max-content.

Définition formelle

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`.
Valeur calculée	le pourcentage comme spécifié ou la longueur absolue ou le mot-clé `none`
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

max-height = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Exemples

HTML

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

css

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

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

Specification
CSS Box Sizing Module Level 4 # width-height-keywords
CSS Box Sizing Module Level 4 # sizing-values

Compatibilité des navigateurs

BCD tables only load in the browser