Propriété CSS min-height

La propriété min-height définit la hauteur minimale d'un élément. L'élément peut devenir plus grand que cette valeur lorsque son contenu nécessite plus d'espace, mais il ne peut jamais être plus petit. En pratique, min-height établit un plancher sous la hauteur de la boîte.

C'est utile lorsque vous souhaitez garantir une certaine quantité d'espace vertical même en l'absence de contenu — par exemple, une bannière hero, une carte ou un pied de page qui doit toujours paraître substantiel, quelle que soit la quantité de texte qu'il contient.

Comment min-height interagit avec height et max-height

Les trois propriétés de hauteur sont résolues ensemble par les règles de dimensionnement du navigateur :

Si la valeur calculée de height est inférieure à min-height, l'élément est forcé à atteindre min-height (la valeur minimale l'emporte).
Si la valeur calculée de height est supérieure à min-height, min-height n'a aucun effet.
min-height a toujours la priorité sur max-height : en cas de conflit entre les deux, l'élément aura au moins la hauteur min-height, même si cela dépasse max-height.

La hauteur effective est donc comprise dans la plage min-height ... max-height, et le contenu qui déborde de cette plage est géré par la propriété overflow.

La propriété accepte une longueur CSS (px, em, rem, vh, etc.) ou un pourcentage.

Info

Un min-height en pourcentage est calculé par rapport à la hauteur de l'élément parent. Si le parent n'a pas de hauteur explicitement définie, le pourcentage est traité comme 0 (c'est-à-dire sans effet) — une source de confusion fréquente. Les valeurs négatives ne sont jamais acceptées.

Valeur initiale	0
S'applique à	Tous les éléments, sauf les éléments inline non remplacés, les groupes de colonnes et les colonnes de tableau.
Hérité	Non.
Animatable	Oui. La hauteur est animatable.
Version	CSS2
Syntaxe DOM	object.style.minHeight = "100px";

Syntaxe

Syntaxe de la propriété CSS min-height

min-height: auto | length | percentage | calc() | initial | inherit;

Exemple de la propriété min-height :

Exemple de la propriété CSS min-height avec une valeur en px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété min-height définie à « 3cm » :

Exemple de la propriété CSS min-height avec une valeur en cm

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Essayez vous-même »

Utilisation des mots-clés basés sur le contenu

En plus des longueurs et des pourcentages, min-height accepte des mots-clés de dimensionnement intrinsèque qui basent le minimum sur le contenu lui-même :

min-content — la hauteur la plus petite que le contenu puisse prendre sans déborder (approximativement la hauteur lorsqu'il est enveloppé aussi étroitement que possible).
max-content — la hauteur que le contenu prendrait s'il n'était jamais forcé de se replier à la ligne.
fit-content() — se limite à l'espace disponible sans jamais dépasser max-content.

Ces valeurs sont pratiques lorsque vous souhaitez qu'une boîte soit « aussi haute que son contenu, mais jamais plus courte », sans coder en dur une valeur en pixels.

Un cas d'utilisation courant : s'étirer pour remplir un conteneur flex

min-height: 100vh est un modèle populaire pour les mises en page à « pied de page fixe » — il rend un conteneur au moins aussi haut que le viewport, de sorte que le pied de page se trouve en bas même sur des pages courtes, tout en permettant à la page de s'agrandir lorsque le contenu est long :

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* at least the full viewport, but can grow */
}

.page main {
  flex: 1; /* pushes the footer to the bottom */
}

Comme il s'agit d'un minimum, la mise en page ne rogne jamais le contenu long — la boîte s'étend simplement au-delà de 100vh. Associez-le à box-sizing: border-box pour que le rembourrage et les bordures n'ajoutent pas de façon inattendue à la hauteur calculée.

Valeurs

Valeur	Description	Essayer
auto	Le navigateur calcule et sélectionne une min-height pour l'élément donné.	Essayer »
length	Définit la hauteur minimale en px, em, rem, etc. La valeur par défaut est 0.	Essayer »
%	Définit la hauteur minimale en pourcentage de la hauteur du parent.
calc()	Calcule la hauteur minimale à l'aide d'une expression.	Essayer »
fit-content()	Définit la hauteur minimale en fonction de la taille du contenu, limitée à l'espace disponible.	Essayer »
max-content	Définit la hauteur minimale à la hauteur maximale intrinsèque du contenu.	Essayer »
min-content	Définit la hauteur minimale à la hauteur minimale intrinsèque du contenu.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite de la propriété depuis son élément parent.

Exercice

Pratique

Que fait la propriété 'min-height' en CSS ?

Elle définit la hauteur minimale d'un élément.Elle définit la hauteur maximale d'un élément.Il n'existe pas de propriété 'min-height' en CSS.Elle permet d'empêcher une boîte CSS de se réduire en dessous d'une certaine taille.Elle définit la hauteur exacte d'un élément.

Propriétés associées

height — définit la hauteur préférée d'un élément.
max-height — limite la hauteur maximale qu'un élément peut atteindre.
min-width — l'équivalent horizontal de min-height.
box-sizing — contrôle si le rembourrage et les bordures sont inclus dans la hauteur.
overflow — détermine ce qui se passe lorsque le contenu dépasse la boîte.