Propriété CSSModèle de boîte
min-height
Définit une hauteur minimale, tout en laissant l’élément grandir avec son contenu.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- tous les éléments sauf les éléments en ligne non remplacés (par exemple `<span>`), les lignes de tableau et les groupes de lignes
- JavaScript
element.style.minHeight = "120px"
Exemple
#CSS
.empty-state {
min-height: 120px;
display: grid;
place-items: center;
}HTML de l’exemple
<div class="empty-state stage">Vous n’avez pas encore de tâches terminées</div>Aperçu
Définition et utilisation
#La propriété min-height garantit qu’un élément mesure au moins la hauteur indiquée. S’il y a plus de contenu, l’élément grandit simplement. C’est une alternative plus sûre qu’un height fixe.
Vous la rencontrerez souvent dans les sections visibles sans défilement, les cartes qui doivent partager la même hauteur, et les états vides de liste qui ne doivent pas s’affaisser.
Quand min-height dépasse height ou max-height, c’est min-height qui l’emporte.
Syntaxe
#Syntaxe
min-height: auto | <longueur> | <pourcentage> | min-content | max-content;Valeurs
#Valeurs en pratique
#auto
La hauteur dépend uniquement du contenu.
.demo { min-height: auto; }100px
L’élément mesure au moins 100px, et grandit si le contenu est plus volumineux.
.demo { min-height: 100px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour les sections plein écran sur téléphone, les unités
100svhou100dvhsont préférables à100vh, car elles tiennent compte de la barre d’adresse. - Pour aligner des cartes sur une même ligne, Flexbox ou Grid sont plus simples qu’un
min-heightfixe.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.