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 lorsque min-height est supérieure.

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 verticale, 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	Ajout du mot-clé `auto` et définition de ce mot-clé comme valeur initiale.
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.

Valeur initiale	`auto`
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
Type d'animation	une longueur, pourcentage ou calc() ;
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`min-height`	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 3 Notes Support complet 3 Notes Notes CSS 2.1 leaves the behavior of `min-height` with `table` undefined. Firefox supports applying `min-height` to `table` elements.	IE Support complet 7 Notes Support complet 7 Notes Notes In Internet Explorer 10 and 11, a `min-height` declaration on a column-direction flex container doesn't apply to the container's flex items. See Flexbug #3 for more info.	Opera Support complet 4 Notes Support complet 4 Notes Notes CSS 2.1 leaves the behavior of `min-height` with `table` undefined. Opera supports applying `min-height` to `table` elements.	Safari Support complet 1.3	WebView Android Support complet 4.4	Chrome Android Support complet 18	Firefox Android Support complet 4 Notes Support complet 4 Notes Notes CSS 2.1 leaves the behavior of `min-height` with `table` undefined. Firefox supports applying `min-height` to `table` elements.	Opera Android Support complet Oui	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
`auto`	Chrome Support complet 21	Edge Aucun support Non	Firefox Aucun support 16 — 22 Notes Aucun support 16 — 22 Notes Notes Firefox 18 and later used `auto` as the initial value for `min-height`.	IE Aucun support Non	Opera Support complet 12.1	Safari Aucun support Non	WebView Android Support complet 37	Chrome Android Support complet 25	Firefox Android Aucun support 16 — 22 Notes Aucun support 16 — 22 Notes Notes Firefox 18 and later used `auto` as the initial value for `min-height`.	Opera Android ?	Safari iOS Aucun support Non	Samsung Internet Android Support complet 1.5
`fit-content` Expérimentale	Chrome Support complet 46 Support complet 46 Support complet 25 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Aucun support Non	Firefox Support complet 3 Préfixée Notes Support complet 3 Préfixée Notes Préfixée Nécessite l'utilisation d'un préfixe : -moz- Notes Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	IE Aucun support Non	Opera Support complet 44	Safari Support complet 6.1 Préfixée Support complet 6.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 2 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	WebView Android Support complet 46 Support complet 46 Support complet ≤37 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 46	Firefox Android Support complet 4 Préfixée Notes Support complet 4 Préfixée Notes Préfixée Nécessite l'utilisation d'un préfixe : -moz- Notes Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	Opera Android Support complet 43	Safari iOS Support complet 6.1 Préfixée Support complet 6.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	Samsung Internet Android Support complet 5.0
`max-content`	Chrome Support complet 46	Edge Aucun support Non	Firefox Support complet 66 Support complet 66 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	IE Aucun support Non	Opera Support complet 44	Safari Support complet 11 Support complet 11 Support complet 9 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 46	Chrome Android Support complet 46	Firefox Android Support complet 66 Support complet 66 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	Opera Android Support complet 43	Safari iOS Support complet 11 Support complet 11 Support complet 9 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 5.0
`min-content`	Chrome Support complet 46	Edge Aucun support Non	Firefox Support complet 66 Support complet 66 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	IE Aucun support Non	Opera Support complet 44	Safari Support complet 11 Support complet 11 Support complet 9 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 46	Chrome Android Support complet 46	Firefox Android Support complet 66 Support complet 66 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	Opera Android Support complet 43	Safari iOS Support complet 11 Support complet 11 Support complet 9 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 5.0
`stretch` Expérimentale	Chrome Support complet 28 Autre nom Support complet 28 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Edge Aucun support Non	Firefox Aucun support Non	IE Aucun support Non	Opera Support complet Oui Autre nom Support complet Oui Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Safari Support complet 9 Autre nom Support complet 9 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	WebView Android Support complet 4.4 Autre nom Support complet 4.4 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Chrome Android Support complet 28 Autre nom Support complet 28 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Firefox Android Aucun support Non	Opera Android Support complet Oui Autre nom Support complet Oui Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Safari iOS Support complet 9 Autre nom Support complet 9 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Samsung Internet Android Support complet 1.5 Autre nom Support complet 1.5 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`

Légende

Support complet: Support complet
Aucun support: Aucun support
Compatibilité inconnue: Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.: Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.: Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.: Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.