height

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété height définit la hauteur de la boîte de contenu d'un élément. La boîte de contenu 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

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the height.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

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,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<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> = 
  <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

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>

Specification
CSS Box Sizing Module Level 3 # preferred-size-properties
CSS Box Sizing Module Level 4 # sizing-values

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨7 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content