Propriété CSS max-height

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>

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>

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.

Support de Navigateurs

18.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées