MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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.

/* 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;

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

Syntaxe

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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui3172431
fit-content, max-content, and min-content Non Non Non Non Non9
fill-available Non Non Non Non Non9
auto21 ?16 — 224 Non12.1 Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui ? ?9 ?
fit-content, max-content, and min-content ? ? ? ? ? ? ?
fill-available ? ? ? ? ? ? ?
auto ? ? ? ? ? ? ?

1. CSS 2.1 leaves the behavior of min-height with table undefined. Firefox supports applying min-height to table elements.

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

3. CSS 2.1 leaves the behavior of min-height with table undefined. Opera supports applying min-height to table elements.

4. Firefox 18 and later used auto as the initial value for min-height.

Voir aussi

Étiquettes et contributeurs liés au document

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