height
======

La propriété **`height`** définit la hauteur de la boîte de contenu d'un élément. La boîte de contenu (en-US) est à l'intérieur de la boîte de remplissage (*padding*) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété `box-sizing` vaut `border-box`, cette propriété détermine la hauteur de la boîte de marge.

Exemple interactif
------------------

Les propriétés `min-height` et `max-height` surchargent la propriété `height`.

Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
height: auto;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
height: 120px;
height: 10em;

/\* Valeurs relatives proportionnelles \*/
/\* Type <percentage> \*/
height: 75%;

/\* Valeurs globales \*/
height: inherit;
height: initial;
height: unset;
```

### Valeurs

`<length>`

Une valeur de longueur absolue. Voir la page `<length>` pour les unités qui peuvent être utilisées.

`<percentage>`

La valeur exprimée correspond à un pourcentage (type `<percentage>`) de la hauteur du bloc englobant.

`border-box` 
Expérimental

Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.

`content-box` 
Expérimental

Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément

`auto`

Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.

`fill` 
Expérimental

Utilise la taille `fill-available` dans l'axe du sens de lecture ou la taille `fill-available` dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.

`max-content` 
Expérimental

La hauteur intrinsèque préférrée.

`min-content` 
Expérimental

La hauteur intrinsèque minimale.

`available` 
Expérimental

La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (*padding*) vertical.

`fit-content` 
Expérimental

La plus grande des valeurs entre :

* La hauteur minimale intrinsèque.
* Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| 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 exprimé 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 `auto` et la hauteur du pourcentage sur l'élément racine est relative au bloc contenant initial. |
| Valeur calculée | un pourcentage ou `auto` ou une longueur absolue |
| Type d'animation | une longueur, pourcentage ou calc() ; |

Syntaxe formelle
----------------
```

height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemple
-------

### CSS


```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

### HTML


```html
<div id="red">
  <span>Je mesure 50 pixels de haut.</span>
</div>
<div id="green">
  <span>Et moi je mesure 25 pixels de haut.</span>
</div>
<div id="parent">
  <div id="child">
    <span>Je suis moitié moins haut que mon parent.</span>
  </div>
</div>
```

### Résultat

Accessibilité
-------------

Veiller à s'assurer que les éléments ciblés avec une règle utilisant `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 3 # preferred-size-properties |
| 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
----------

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