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 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

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 initialeauto
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
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
min-heightChrome Support complet 1Edge Support complet 12Firefox 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.3WebView Android Support complet 37Chrome Android Support complet 18Firefox 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 OuiSafari iOS Support complet 1Samsung Internet Android ?
max-contentChrome Support complet 46Edge Aucun support NonFirefox 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 NonOpera Support complet 44Safari Support complet OuiWebView Android Support complet 46Chrome Android Support complet 46Firefox 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 43Safari iOS Support complet OuiSamsung Internet Android Support complet 5.0
min-contentChrome Support complet 46Edge Aucun support NonFirefox 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 NonOpera Support complet 44Safari Support complet OuiWebView Android Support complet 46Chrome Android Support complet 46Firefox 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 43Safari iOS Support complet OuiSamsung 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 NonFirefox Aucun support NonIE Aucun support NonOpera 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 NonOpera 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 ? Samsung Internet Android Support complet Oui
Autre nom
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
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 NonFirefox 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 NonOpera Support complet 44Safari 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 Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 46Firefox Android Aucun support NonOpera Android Support complet 43Safari iOS ? Samsung Internet Android Support complet 5.0
autoChrome Support complet 21Edge Aucun support NonFirefox 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 NonOpera Support complet 12.1Safari Aucun support NonWebView Android Support complet 37Chrome Android Support complet 25Firefox 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 ? Samsung Internet Android ?

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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,