height

Exemple interactif

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte dont vous pouvez changer la hauteur.
  </div>
</section>

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

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

Syntaxe

/* Valeur avec un mot-clé */
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;
height: stretch;

/* Valeurs de type <length> */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--my-anchor self-block, 250px);
height: clamp(200px, anchor-size(width));

/* Valeurs de type <percentage> */
height: 75%;

/* Valeurs globales */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Valeurs

<length>

Définit la hauteur comme une valeur de distance.

<percentage>

Définit la hauteur comme un pourcentage de la hauteur du bloc englobant.

auto

Le navigateur calcule et choisit une hauteur pour l'élément défini.

max-content

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

min-content

La hauteur intrinsèque minimale.

fit-content

Utilise l'espace disponible, mais pas plus que max-content, c'est-à-dire min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>) Expérimental

Utilise la formule fit-content en remplaçant l'espace disponible par l'argument défini, c'est-à-dire min(max-content, max(min-content, <length-percentage>)).

stretch

Définit la hauteur de la boîte de marge de l'élément à la hauteur de son bloc englobant. Cela tente de faire en sorte que la boîte de marge occupe tout l'espace disponible dans le bloc englobant, se comportant ainsi comme 100% mais en appliquant la taille résultante à la boîte de marge plutôt qu'à la boîte déterminée par box-sizing.

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.

• MDN Comprendre WCAG, explications de la règle 1.4
• Comprendre le critère de succès 1.4.4 | W3C Understanding WCAG 2.0 ^(angl.)

Définition formelle

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

Définir la hauteur en utilisant des pixels et des pourcentages

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>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété width
• La propriété box-sizing
• Les propriétés min-height, max-height
• Les propriétés block-size, inline-size
• La fonction anchor-size()
• La fonction clamp()
• La fonction minmax()
• L'attribut SVG height
• Le modèle de boîtes