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 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.
Médiavisuel
Valeur calculéeun pourcentage ou auto ou une longueur absolue
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 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) Edge IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) (Oui) 6.0 6.0 1.0
fill, fit-content, min-content, max-content ? 46.0 ? 46.0 46.0 46.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, dabus, FredB, Mgjbot, Aurelgadjo, Fredchat
 Dernière mise à jour par : SphinxKnight,