La propriété min-height est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété height devienne inférieure à min-height.

La valeur de la propriété min-height surcharge celles de max-height et height.

Valeur initiale0
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 si elle valait 0.
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Animableoui, 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 canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeur de longueur */
/* Type <length>      */
min-height: 3.5em;

/* Valeur relative au bloc */
/* Type <percentage>       */
min-height: 10%;

/* Valeurs avec un mot-clé */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* Valeurs globales */
min-height: inherit;
min-height: initial;
min-height: unset;

Valeurs

<length>
La hauteur minimale exprimée de façon absolue. Voir la page <length> pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
<percentage>
La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type <percentage>. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
max-content
La hauteur intrinsèque préférée.
min-content
La hauteur intrinsèque minimale préférée.
fill-available
La hauteur du bloc englobant moins celle de la marge horizontale, de la bordure et du remplissage (padding). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : available.
fit-content
Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de min-content. La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.

Syntaxe formelle

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

Exemples

HTML

<div> Lorem ipsum tralala
<p class="exemple">toto</p>
 Duis aute irure dolor in reprehender
</div>

CSS

div {
  height: 150px;
  border: solid 1px red;
}

.exemple {
  min-height: 70%;
  border: solid 1px blue;
}

Résultat

Spécifications

Spécification Statut Commentaires
CSS Intrinsic & Extrinsic Sizing Module Level 3
La définition de 'min-height' dans cette spécification.
Version de travail Ajout des mots-clés max-content, min-content, fit-content et fill-available.
CSS Flexible Box Layout Module
La définition de 'min-height' dans cette spécification.
Candidat au statut de recommandation

Une version antérieure de la spécification ajouta le mot-clé auto, alors utilisé comme valeur initiale. Le groupe de travail sur CSS a décidé de revenir sur cette modification.Le 29 mars 2013, l'édition du brouillon de travail ne modifie plus la propriété min-width (autrement dit, la valeur auto n'est pas ajoutée).

CSS Transitions
La définition de 'min-height' dans cette spécification.
Version de travail min-height peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'min-height' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 3.0 (1.9) 7.0 [3] 4.0 1.0
2.0.2 (416) pour les éléments positionnés
S'applique à <table> [1] Pas de support (Oui) Pas de support (Oui) Pas de support
max-content, min-content, fit-content, fill-available Pas de support Pas de support Pas de support Pas de support 9
autoObsolète depuis Gecko 22 21.0 16.0 (16.0) Pas de support 12.10 Pas de support
auto comme valeur initiale Obsolète depuis Gecko 22 21.0 18.0 (18.0) Pas de support 12.10 Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? 9

[1] CSS 2.1 ne définit pas, de façon explicite, le comportement de min-height pour <table>. Ainsi n'importe quel comportement peut être valide pour la spécification CSS2.1. Les prochaines spécifications CSS pourront définir un comportement normatif et il est donc conseillé aux auteurs de ne pas faire de suppositions.

[2] Suite au bug (bug 307866),  Firefox ne gère pas min-height sur les éléments dont la valeur de la propriété display est table-*.

[3] Pour Internet Explorer 10-11 (mais pas Edge), si on utilise une déclaration min-height sur un conteneur flexible pour une colonne, cela ne s'appliquera pas aux éléments du conteneur flexible. Voir Flexbug #3 pour plus d'infos.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, Grsmto, Delapouite, tregagnon, Mgjbot, Fredchat
 Dernière mise à jour par : SphinxKnight,