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

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,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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;
}
```

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

* Comprendre les règles WCAG 1.4
* *Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0* (en anglais)
Spécifications
--------------

| 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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `height`
* `min-height`
* `box-sizing`
* Le modèle de boîtes