Propriété CSS max-height

La propriété max-height définit la hauteur maximale qu'un élément est autorisé à atteindre. L'élément peut être plus court que cette valeur, mais il ne sera jamais plus grand. Si la propriété height est définie sur une valeur plus grande, max-height la remplace et limite l'élément.

C'est utile lorsque vous avez du contenu de longueur inconnue ou variable — une boîte de commentaire, un panneau déroulant, une fenêtre de chat, une image ou une carte — et que vous souhaitez l'empêcher de perturber le reste de la mise en page. Associez max-height à la propriété overflow pour que le contenu plus grand que la limite défile plutôt que de déborder visuellement.

Cette page couvre la syntaxe, toutes les valeurs acceptées, la façon dont max-height interagit avec min-height et height, ainsi que des cas d'utilisation courants.

Comment max-height se résout

Lorsque plusieurs propriétés liées à la hauteur s'appliquent, le navigateur les résout dans un ordre de priorité fixe :

min-height l'emporte sur max-height qui l'emporte sur height

En d'autres termes, si vous définissez height: 100px; max-height: 50px, l'élément s'affiche à 50px (max l'emporte). Mais si vous définissez également min-height: 80px, l'élément s'affiche à 80px (min l'emporte sur max). Cet ordre est important lorsque plusieurs règles entrent en conflit — min-height a toujours le dernier mot.

Piège des pourcentages : un max-height en pourcentage est résolu par rapport à la hauteur du bloc conteneur. Si ce parent n'a pas de hauteur explicite (sa hauteur est auto), le pourcentage n'a rien de concret à mesurer et max-height se comporte comme none.

Valeur initiale	none
S'applique à	Tous les éléments, sauf les éléments inline non remplacés, les colonnes de tableaux et les groupes de colonnes.
Hérité	Non.
Animatable	Oui. La hauteur est animatable.
Version	CSS2
Syntaxe DOM	object.style.maxHeight = "50px";

Syntaxe

Syntaxe de la propriété CSS max-height

max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;

Exemple avec une valeur fixe en px

Dans l'exemple ci-dessous, le paragraphe est limité à 50px. Comme le texte est plus long que cela, overflow: auto ajoute une barre de défilement pour que le contenu reste lisible sans casser la mise en page.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        max-height: 50px;
        overflow: auto;
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Essayez vous-même »

Exemple avec une valeur en cm

Ici, le premier paragraphe n'a aucune limite (max-height: none), tandis que le second est limité à 2cm. Cela montre comment le même contenu se comporte avec et sans limitation, côte à côte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1 {
        max-height: 2cm;
        overflow: auto;
        border: 1px solid #666;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Essayez vous-même »

Exemple avec des valeurs en pourcentage et calc()

Les deux boîtes ci-dessous ont une height explicite, de sorte que les valeurs en pourcentage et calc() ont une référence sur laquelle se baser. La première est limitée à la moitié de sa propre hauteur ; la seconde utilise calc() pour laisser un espace de 50px sous la limite.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .percent-example {
        max-height: 50%;
        overflow: auto;
        border: 1px solid #666;
        height: 200px;
      }
      .calc-example {
        max-height: calc(100% - 50px);
        overflow: auto;
        border: 1px solid #666;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: 50%;</h3>
    <p class="percent-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: calc(100% - 50px);</h3>
    <p class="calc-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
none	Valeur par défaut. Aucune hauteur maximale n'est définie.	Essayer »
length	Définit une hauteur maximale fixe en px, pt, cm, etc.	Essayer »
percentage	Définit la hauteur maximale en pourcentage de la hauteur du bloc conteneur.	Essayer »
calc()	Calcule la hauteur maximale à l'aide d'une expression.	Essayer »
max-content	Définit la hauteur maximale à la taille maximale intrinsèque du contenu.	Essayer »
min-content	Définit la hauteur maximale à la taille minimale intrinsèque du contenu.	Essayer »
fit-content	Définit la hauteur maximale à la taille fit-content.	Essayer »
initial	Définit cette propriété à sa valeur par défaut.	Essayer »
inherit	Hérite cette propriété de son élément parent.	Essayer »

Cas d'utilisation courants

Panneaux défilants. Un menu déroulant, une barre latérale ou un journal de chat qui ne doit jamais dépasser le viewport : définissez max-height avec overflow-y: auto.
Images responsives. img { max-height: 80vh; } empêche une image de grande hauteur de dépasser la hauteur de l'écran tout en se redimensionnant sur les petits viewports.
Sections repliables / « lire la suite ». Animez max-height d'une petite valeur vers une valeur plus grande pour révéler le contenu masqué avec une transition CSS (animer max-height fonctionne là où animer height: auto ne fonctionne pas).
Cartes d'apparence uniforme. Limiter max-height sur les corps de cartes empêche une grille de cartes d'avoir une tuile qui s'emballe.

Conseils et pièges

max-height ne définit qu'un plafond — elle ne force pas un élément à atteindre cette hauteur. Utilisez height ou min-height pour cela.
Sans valeur overflow, le contenu plus grand que max-height déborde simplement de la boîte. Ajoutez overflow: auto (défilement) ou overflow: hidden (rognage) pour le contrôler.
Un max-height en pourcentage nécessite que le parent ait une hauteur résolue, sinon il est ignoré.
Rappellez-vous que border et padding comptent dans la boîte sauf si vous définissez box-sizing ; le content-box par défaut mesure max-height par rapport à la zone de contenu uniquement.
Il existe une propriété équivalente pour la largeur : voir max-width.

Pratique

Quelle est la fonction de la propriété 'max-height' en CSS ?

Elle définit la hauteur maximale d'un élément.Elle définit la hauteur minimale d'un élément.Elle limite la largeur d'un élément.Elle garantit que la hauteur d'un élément ne dépasse pas une certaine valeur.Elle réinitialise la hauteur d'un élément à 'auto'.