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
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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(<length-percentage>)où
<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é |
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 initiale | auto |
---|---|
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ée | non |
Pourcentages | Le 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ée | le pourcentage tel que spécifé ou une longeur absolue |
Type d'animation | une longueur, pourcentage ou calc() ; |
Compatibilité des navigateurs
BCD tables only load in the browser
Pour contribuer à ces données de compatibilité, vous pouvez envoyer une pull request sur ce dépôt: https://github.com/mdn/browser-compat-data.