min-height

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 initiale	`0`
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ée	non
Pourcentages	Le 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édia	visuel
Valeur calculée	le pourcentage tel que spécifé ou une longeur absolue
Animable	oui, 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 canonique	l'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.

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
`auto`Obsolè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.