Propriété min-height CSS
La propriété min-height définit la hauteur minimale d'un élément. Cette propriété empêche la valeur de la propriété height de devenir inférieure à la valeur spécifiée pour min-height.
La propriété min-height interagit avec les propriétés height et max-height conformément aux règles de dimensionnement CSS.
La propriété accepte une longueur CSS (px, pt, em, etc.) ou un pourcentage.
INFO
Les valeurs négatives ne sont pas acceptées.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments, à l'exception des éléments en ligne non remplacés, des groupes de colonnes et des colonnes de tableau. |
| Héritée | Non. |
| Animable | Oui. La hauteur est animable. |
| Version | CSS2 |
| Syntaxe DOM | object.style.minHeight = "100px"; |
Syntaxe
Syntaxe de la propriété CSS min-height
min-height: auto | length | percentage | calc() | initial | inherit;Exemple de la propriété min-height :
Exemple de la propriété CSS min-height avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
min-height: 50px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Min-height property example</h2>
<div>The text area's minimum height is defined as 50px.</div>
</body>
</html>Résultat
Exemple de la propriété min-height spécifiée à "3cm" :
Exemple de la propriété CSS min-height avec une valeur en cm
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #ccc;
}
p.example {
min-height: 3cm;
}
</style>
</head>
<body>
<h2>Min-height property example</h2>
<h3>Min-height: auto.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<h3>Min-height: 3cm.</h3>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valeurs
| Valeur | Description | Tester | |---|---| | auto | Le navigateur calcule et sélectionne une hauteur minimale pour l'élément donné. | Tester » | | length | Définit la hauteur minimale en px, pt, cm, etc. La valeur par défaut est 0. | Tester » | | % | Définit la hauteur minimale en % de l'élément conteneur. | | | calc() | Calcule la hauteur minimale à l'aide d'une expression. | Tester » | | fit-content() | Définit la hauteur minimale en fonction de la taille du contenu. | Tester » | | max-content | Définit la hauteur minimale sur la largeur/hauteur maximale intrinsèque du contenu. | Tester » | | min-content | Définit la hauteur minimale sur la largeur/hauteur minimale intrinsèque du contenu. | Tester » | | initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » | | inherit | Hérite la propriété de son élément parent. | |
Pratique
Que fait la propriété 'min-height' en CSS ?