Propriété CSS max-height

❮ Précédent Suivant ❯

La propriété max-height définit la hauteur maximale d'un élément. Cette propriété empêche que la valeur de la propriété height devienne supérieure à la valeur spécifiée par max-height.

La propriété max-height passe outre à la propriété height, et la propriété min-height passe outre à la propriété max-height.

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

Syntaxe

max-height: none | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      max-height: 50px;
      overflow: auto;
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété max-height</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, dans lequel la hauteur maximale est définie à "2cm":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example1 {
      max-height: 2cm;
      overflow: auto;
      border: 1px solid #666;
      width:300px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété max-height</h2>
    <h3>Max-height: none;</h3>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Définit la hauteur maximale. C'est la valeur initiale de cette propriété.
length	Définit la hauteur maximale en px, pt, cm, etc. La valeur initiale est 0.
%	Définit la hauteur maximale en % de l'élément contenu.
initial	Fait utiliser la valeur initiale
inherit	Hérite la propriété de son élément parent.