height

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.

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

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 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.
Média	visuel
Valeur calculée	un pourcentage ou `auto` ou une longueur absolue
Animable	oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction `calc()` qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction `calc()` interpole chaque moitié comme un nombre réel.
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

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 largeur du bloc englobant.

border-box

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

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

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

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

min-content

La hauteur intrinsèque minimale.

available

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

fit-content

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

[<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto

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

Spécifications

Spécification	État	Commentaires
CSS Basic Box Model La définition de 'height' dans cette spécification.	Version de travail	Ajout des mots-clés `max-content`, `min-content`, `available`, `fit-content`, `border-box` et `content-box`.
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.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	1.0	1.0 (1.7 ou moins)	4.0	7.0	1.0
`fill`, `fit-content`, `min-content`, `max-content`	46.0	46.0	46.0	46.0	46.0

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	1.0	1.0 (1)	6.0	6.0	1.0
`fill`, `fit-content`, `min-content`, `max-content`	?	46.0	46.0	46.0	46.0