CSS : la propriété min-height

À quoi sert min-height en CSS ?

Un élément vide ou peu rempli peut s'aplatir complètement et déséquilibrer une mise en page. min-height empêche ça : elle impose une hauteur plancher que l'élément ne peut pas passer en dessous, quel que soit le contenu.

La différence avec height : une hauteur fixe bloque l'élément à une valeur précise, même si le contenu déborde. min-height laisse l'élément grandir librement au-delà — elle pose juste un plancher, pas un plafond.

Définition et utilisation de min-height

min-height fixe la hauteur minimum d'un élément. Si le contenu est plus petit, l'élément conserve cette hauteur. S'il est plus grand, l'élément s'étend normalement.
À noter : min-height ne tient pas compte des marges (ni padding ni margin). Elle s'applique à la zone de contenu uniquement.

Un div qui fait toujours au moins 100px de haut, même vide :

div {
  min-height: 100px; /* plancher à 100px — l'élément peut dépasser, pas descendre en dessous */
  width: 100px;
}

Une carte de contenu qui garde une hauteur correcte même avec peu de texte :

.carte {
  min-height: 200px; /* la carte ne s'effondre pas en dessous de 200px */
  width: 300px;
  padding: 16px;
  background: #f5f5f5;
}

.section {
  min-height: 50%; /* 50% de la hauteur du parent — fonctionne seulement si le parent a une hauteur définie */
}

Valeur par défaut : 0 — aucune contrainte de hauteur minimale
Héritage : non
Version CSS : CSS2, toujours valide en 2026
Syntaxe JavaScript : element.style.minHeight = "50px"

Valeurs acceptées

Par carabde 10 mars 2014 | Mis à jour le 29 avril 2026