CSS-Eigenschaft max-height

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.