CSS : height - Web Formation

Description

La propriété height permet de définir la hauteur d’un élément HTML.

Elle contrôle uniquement la hauteur du contenu, c’est-à-dire l’espace intérieur avant le padding, les border et la margin. La hauteur totale affichée peut donc être plus grande selon ces autres propriétés.

La hauteur peut être exprimée en unités fixes (px), relatives (%), ou calculées dynamiquement.

La propriété height n’a aucun effet sur les éléments inline (ex. : <a>, <span>).

Pour dimensionner un élément inline, il faut modifier son mode d’affichage avec la propriété display.

Propriétés détaillées

height : définit la hauteur du contenu de l’élément.
min-height : hauteur minimale à ne jamais descendre en dessous.
max-height : hauteur maximale à ne jamais dépasser.

Valeurs possible

Voici quelques exemples de valeurs utilisables pour height :

Type	Exemple	Description
Hauteur fixe	`200px`, `30em`	Hauteur précise, non adaptable selon le contenu.
Pourcentage	`50%`	Hauteur relative à l’élément parent (nécessite que le parent ait une hauteur définie).
Auto	`height: auto;`	Valeur par défaut : la hauteur s’adapte au contenu.
Viewport	`50vh`	Hauteur relative à la hauteur de la fenêtre (1vh = 1%).
Fonction calc()	`calc(100vh - 80px)`	Calcul personnalisé avec différentes unités.

Exemple

<div class="height-x">Boite dimensionnée en hauteur</div>

<div class="height-x">Boite dimensionnée en hauteur</div>

.height-x {
    height: 120px;
    background-color: lightblue;
}

.height-x {    height: 120px;    background-color: lightblue;}

Aperçu du résultat

Boite dimensionnée en hauteur

Remarques

Une hauteur trop petite peut cacher le contenu, provoquant un débordement (overflow).
La valeur height: 100% ne fonctionne que si l’élément parent a une hauteur définie.
min-height est souvent plus fiable que height pour éviter des problèmes de contenu tronqué.