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

auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)


<length-percentage> = <length> | <percentage>

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 Box 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.
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Type d'animationune longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi