Propriété max-height CSS

La propriété max-height définit la hauteur maximale d'un élément. Si la propriété height est définie sur une valeur plus grande, max-height la remplace. Notez que min-height a la priorité sur max-height, et que max-height a la priorité sur height.

Valeur initiale	none
S'applique à	Tous les éléments, à l'exception des éléments en ligne non remplacés, des colonnes de tableau et des groupes de colonnes.
Héritée	Non.
Animable	Oui. La hauteur est animable.
Version	CSS2
Syntaxe DOM	object.style.maxHeight = "50px";

Syntaxe

Syntaxe de la propriété CSS max-height

css

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

Exemple de la propriété max-height :

Exemple de la propriété CSS max-height avec une valeur en px

html

<!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>

Try it Yourself »

Exemple de la propriété max-height définie comme "cm" :

Exemple de la propriété CSS max-height avec une valeur en cm

html

<!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>

Try it Yourself »

Exemple de la propriété max-height avec des valeurs en pourcentage et calc() :

Exemple de la propriété CSS max-height avec des valeurs en pourcentage et calc()

html

<!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>

Try it Yourself »

Valeurs

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

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'.

Propriété max-height CSS ​

Syntaxe ​

Exemple de la propriété max-height : ​

Exemple de la propriété max-height définie comme "cm" : ​

Exemple de la propriété max-height avec des valeurs en pourcentage et calc() : ​

Valeurs ​

Pratique ​

Propriété max-height CSS

Syntaxe

Exemple de la propriété max-height :

Exemple de la propriété max-height définie comme "cm" :

Exemple de la propriété max-height avec des valeurs en pourcentage et calc() :

Valeurs

Pratique