CSS-Eigenschaft max-height

Die Eigenschaft max-height definiert die maximale Höhe eines Elements. Diese Eigenschaft verhindert, dass der Wert der Eigenschaft height wird als der für die Eigenschaft max-height angegebene Wert.

Die Eigenschaft max-height überschreibt die Eigenschaften height, und die Eigenschaft min-height überschreibt die Eigenschaft max-height.

Anfangswert none
Gilt für Alle Elemente, aber nicht ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen.
Geerbt Nein
Animierbar Ja, die Höhe ist animierbar.
Version CSS2
DOM Syntax object.style.maxHeight = "50px";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      max-height: 50px;
      overflow: auto;
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft max-height</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</p>
  </body>
</html>

Ein weiteres Beispiel, woi die maximale Höhe durch "2cm" definiert ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example1 {
      max-height: 2cm;
      overflow: auto;
      border: 1px solid #666;
      width:300px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft max-height</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
  </body>
</html>

Werte

Wert Beschreibung
auto Definiert die maximale Höhe fest. Es ist der Standardwert dieser Eigenschaft.
length Definiert die maximale Höhe in px, pt, cm usw. Der Standardwert ist 0.
% Stellt die maximale Höhe in % des enthaltenden Elements ein.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
18.0+ 12.0+ 1.0+ 1.0+ 7.0+

Übe dein Wissen

Was sind die möglichen Werte für die CSS-Eigenschaft 'max-height'?
Finden Sie das nützlich?