max-height

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer la hauteur maximum que doit avoir un élément.

Remarques

• Limite de la hauteur d'un élément : La propriété max-height permet de définir la hauteur maximale d'un élément. Elle empêche l'élément de dépasser cette hauteur, quelle que soit son contenu. Cela est particulièrement utile pour gérer les débordements d'éléments dans une interface utilisateur sans risquer d'affecter la mise en page.
• Unité de mesure : Comme pour d'autres propriétés de taille en CSS, max-height peut être exprimée en diverses unités de mesure telles que les pixels (px), les pourcentages (%), les ems (em), et les rems (rem). Cependant, il est important de noter que l'utilisation de pourcentages pour max-height dépend du contexte et de la hauteur du parent. Si le parent n'a pas de hauteur définie, la valeur en pourcentage peut ne pas fonctionner comme prévu.
• Interaction avec height : Lorsque max-height est utilisé en combinaison avec la propriété height, la hauteur réelle de l'élément est déterminée par la plus petite valeur entre height et max-height. Cela signifie que si la hauteur définie par height dépasse la valeur de max-height, l'élément sera limité à la hauteur définie par max-height.
• Utilisation dans les menus déroulants et les listes : La propriété max-height est fréquemment utilisée pour contrôler l'extension d'éléments comme les menus déroulants, les boîtes de dialogue ou les listes longues. Combinée avec la propriété overflow (par exemple, overflow-y: auto), elle permet de créer des sections pouvant se développer mais ne dépasseront jamais une hauteur spécifique, tout en permettant l'apparition de barres de défilement si nécessaire.
• Rôle dans les éléments avec overflow : La propriété max-height fonctionne bien en combinaison avec overflow, notamment dans les éléments ayant un contenu dynamique. Par exemple, si le contenu d'un élément dépasse la hauteur maximale définie par max-height, l'élément peut afficher une barre de défilement verticale (avec overflow-y: auto) pour permettre à l'utilisateur de naviguer dans le contenu excédentaire.
• Réactivité et design flexible : max-height peut être utilisé dans des conceptions réactives pour garantir qu'un élément ne s'étend pas au-delà d'une certaine taille, indépendamment de la taille de l'écran ou de la quantité de contenu. Cette approche garantit une mise en page plus cohérente et esthétique, surtout lorsqu'il y a une grande variété de contenu à afficher sur différents appareils.
• Limites avec les éléments positionnés : Pour les éléments positionnés de manière absolue ou fixe (position: absolute; ou position: fixed;), la propriété max-height fonctionne normalement, mais son impact peut être difficile à observer si l'élément est retiré du flux normal du document. Dans ces cas, le contenu peut s'étendre au-delà de la hauteur maximale sans affecter les autres éléments.
• Interactions avec les boîtes de contenu flexibles : Dans un conteneur avec une disposition en Flexbox (display: flex;), max-height peut être utilisé pour limiter la hauteur des éléments flexibles. Cependant, il est important de noter que la propriété max-height ne contraint pas directement l'extension des éléments flexibles si l'espace restant dans le conteneur est insuffisant. Cela peut entraîner des comportements inattendus si la hauteur maximale est fixée tout en ayant des éléments qui devraient s'étirer pour occuper l'espace disponible.