max-height
Définit la hauteur maximale d’un élément.
- Valeur initiale
none- 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.maxHeight = "200px"
Exemple
#.chat {
max-height: 120px;
overflow-y: auto;
}<div class="chat stage">
<p>Léa : Salut, tu as déjà fait le module Flexbox ?</p>
<p>Emma : Oui, il ne me reste que l’exercice de synthèse.</p>
<p>Léa : Super, moi je bloque sur align-items.</p>
<p>Emma : N’oublie pas, ça agit sur l’axe secondaire !</p>
</div>Définition et utilisation
#La propriété max-height empêche un élément de grandir au-delà de la valeur indiquée. L’excédent de contenu suit alors la propriété overflow : par défaut, il déborde de l’élément.
On l’associe le plus souvent à overflow: auto, pour que les longues listes, les fenêtres de chat ou les menus déroulants obtiennent une barre de défilement au lieu de pousser la page.
On animait autrefois max-height pour déplier des sections. Cela fonctionne, mais oblige à deviner la valeur finale, c’est pourquoi on préfère aujourd’hui <details> ou l’animation de grid-template-rows.
Syntaxe
#max-height: none | <longueur> | <pourcentage> | min-content | max-content | fit-content;Valeurs
#- Aucune limite. La liste est aussi haute que son contenu.
<longueur>
La liste mesure au plus 60px, et le reste des éléments déborde.avec overflow: auto
Associée àoverflow: auto, elle donne une liste défilante.
Valeurs en pratique
#none
.demo { max-height: none; }60px
.demo { max-height: 60px; }60px + overflow
overflow: auto, elle donne une liste défilante..demo { max-height: 60px; overflow: auto; }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
#max-heightseul, sansoverflow, laisse le contenu déborder de l’élément. Ajoutez presque toujoursoverflow: auto.- Sur les panneaux défilants, ajoutez aussi
overscroll-behavior: contain, pour que le défilement ne se propage pas à toute la page.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.