CSS max-height-Eigenschaft

Die max-height-Eigenschaft legt die maximale Höhe eines Elements fest. Wenn die height-Eigenschaft auf einen größeren Wert gesetzt ist, überschreibt max-height diesen. Beachten Sie, dass min-height Vorrang vor max-height hat und max-height Vorrang vor height hat.

Anfangswert	none
Anwendbar auf	Alle Elemente, jedoch nicht bei nicht ersetzten Inline-Elementen, Tabellenspalten und Spaltengruppen.
Vererbbar	Nein.
Animierbar	Ja. Die Höhe ist animierbar.
Version	CSS2
DOM-Syntax	object.style.maxHeight = "50px";

Syntax

Syntax der CSS max-height-Eigenschaft

css

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

Beispiel für die max-height-Eigenschaft:

Beispiel für die CSS max-height-Eigenschaft mit px-Wert

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 »

Beispiel für die max-height-Eigenschaft, definiert als "cm":

Beispiel für die CSS max-height-Eigenschaft mit cm-Wert

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 »

Beispiel für die max-height-Eigenschaft mit Prozent- und calc()-Werten:

Beispiel für die CSS max-height-Eigenschaft mit Prozent- und calc()-Werten

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 »

Werte

Wert	Beschreibung	Demo
none	Standardwert. Es wird keine maximale Höhe festgelegt.	Demo »
length	Legt eine feste maximale Höhe in px, pt, cm usw. fest.	Demo »
percentage	Legt die maximale Höhe als Prozentsatz der Höhe des umschließenden Blocks fest.	Demo »
calc()	Berechnet die maximale Höhe mit einem Ausdruck.	Demo »
max-content	Legt die maximale Höhe auf die intrinsische maximale Größe des Inhalts fest.	Demo »
min-content	Legt die maximale Höhe auf die intrinsische minimale Größe des Inhalts fest.	Demo »
fit-content	Legt die maximale Höhe auf die fit-content-Größe fest.	Demo »
initial	Setzt diese Eigenschaft auf ihren Standardwert zurück.	Demo »
inherit	Erbt diese Eigenschaft von ihrem übergeordneten Element.	Demo »

Praxis

Welche Funktion hat die 'max-height'-Eigenschaft in CSS?

Sie legt die maximale Höhe für ein Element fest.Sie legt die minimale Höhe für ein Element fest.Sie begrenzt die Breite eines Elements.Sie stellt sicher, dass die Höhe eines Elements einen bestimmten Wert nicht überschreitet.Sie setzt die Höhe eines Elements auf 'auto' zurück.

CSS max-height-Eigenschaft ​

Syntax ​

Beispiel für die max-height-Eigenschaft: ​

Beispiel für die max-height-Eigenschaft, definiert als "cm": ​

Beispiel für die max-height-Eigenschaft mit Prozent- und calc()-Werten: ​

Werte ​

Praxis ​

CSS max-height-Eigenschaft

Syntax

Beispiel für die max-height-Eigenschaft:

Beispiel für die max-height-Eigenschaft, definiert als "cm":

Beispiel für die max-height-Eigenschaft mit Prozent- und calc()-Werten:

Werte

Praxis