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.

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

Syntaxe

/* 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  This is an experimental API that should not be used in production code.
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  This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
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  This is an experimental API that should not be used in production code.
La hauteur intrinsèque préférrée.
min-content  This is an experimental API that should not be used in production code.
La hauteur intrinsèque minimale.
available  This is an experimental API that should not be used in production code.
La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (padding) vertical.
fit-content  This is an experimental API that should not be used in production code.
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

Syntaxe formelle

auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)


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

Exemple

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

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

Spécifications

Spécification État Commentaires
CSS Box Sizing Module Level 3
La définition de 'width' dans cette spécification.
Version de travail Ajout des mots-clés max-content, min-content, available, fit-content.
CSS Transitions
La définition de 'height' dans cette spécification.
Version de travail height peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'height' dans cette spécification.
Recommendation Ajout de la prise en charge des valeurs de type <length> et précision sur les éléments auxquels la propriété s'applique.
CSS Level 1
La définition de 'height' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeauto
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éenon
PourcentagesLe poucentage 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 auto et la hauteur du pourcentage sur l'élément racine est relative au bloc contenant initial.
Valeur calculéeun pourcentage ou auto ou une longueur absolue
Type d'animationune longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi