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.

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1123172431
fit-content, max-content, and min-content Non Non Non Non Non9
fill-available1 Non Non Non Oui9
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 ? ? ? ? ? ? Non
fill-available Oui Oui ? ? Oui ? Oui
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,