CSS max-height-Eigenschaft
Verwende die CSS-Eigenschaft max-height, um die maximale Höhe eines Elements festzulegen. Lerne Eigenschaftswerte mit Beispielen kennen.
Die max-height-Eigenschaft legt die maximale Höhe fest, auf die ein Element anwachsen darf. Das Element kann kürzer als dieser Wert sein, aber niemals höher. Wenn die height-Eigenschaft auf einen größeren Wert gesetzt ist, überschreibt max-height diesen und begrenzt das Element.
Dies ist nützlich, wenn du Inhalte unbekannter oder variabler Länge hast — ein Kommentarfeld, ein Dropdown-Panel, ein Chat-Fenster, ein Bild oder eine Karte — und verhindern möchtest, dass dieser das restliche Layout verschiebt. Kombiniere max-height mit der overflow-Eigenschaft, damit Inhalte, die höher als das Limit sind, scrollen statt sichtbar zu überlaufen.
Diese Seite behandelt die Syntax, alle akzeptierten Werte, die Interaktion von max-height mit min-height und height sowie gängige Praxismuster.
Wie max-height aufgelöst wird
Wenn mehr als eine höhenbezogene Eigenschaft zutrifft, löst der Browser sie in einer festen Rangfolge auf:
min-height hat Vorrang vor max-height hat Vorrang vor height
Mit anderen Worten: Wenn du height: 100px; max-height: 50px setzt, wird das Element bei 50px gerendert (max gewinnt). Wenn du aber auch min-height: 80px setzt, wird das Element bei 80px gerendert (min gewinnt über max). Diese Reihenfolge ist wichtig, wenn mehrere Regeln kollidieren — min-height hat immer das letzte Wort.
Prozent-Fallstrick: Ein Prozentwert bei
max-heightwird gegen die Höhe des enthaltenden Blocks aufgelöst. Wenn dieses Elternelement keine explizite Höhe hat (seine Höhe istauto), hat der Prozentwert nichts Konkretes, wogegen er gemessen werden kann, undmax-heightverhält sich wienone.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente, außer nicht-ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Höhe ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.maxHeight = "50px"; |
Syntax
Syntax der CSS max-height-Eigenschaft
max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;Beispiel mit einem festen px-Wert
Im folgenden Beispiel wird der Absatz auf 50px begrenzt. Da der Text länger ist, fügt overflow: auto eine Scrollleiste hinzu, damit der Inhalt lesbar bleibt, ohne das Layout zu unterbrechen.
<!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>Beispiel mit einem cm-Wert
Hier hat der erste Absatz keine Begrenzung (max-height: none), während der zweite auf 2cm begrenzt ist. Dies zeigt, wie sich derselbe Inhalt mit und ohne Begrenzung nebeneinander verhält.
<!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>Beispiel mit Prozent- und calc()-Werten
Beide Boxen unten haben eine explizite height, sodass die Prozent- und calc()-Werte eine Referenz zur Auflösung haben. Die erste ist auf die Hälfte ihrer eigenen Höhe begrenzt; die zweite verwendet calc(), um einen 50px-Abstand unterhalb der Grenze zu lassen.
<!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>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Standardwert. Es ist keine maximale Höhe festgelegt. | Ausprobieren » |
| length | Legt eine feste maximale Höhe in px, pt, cm usw. fest. | Ausprobieren » |
| percentage | Legt die maximale Höhe als Prozentsatz der Höhe des enthaltenden Blocks fest. | Ausprobieren » |
| calc() | Berechnet die maximale Höhe mithilfe eines Ausdrucks. | Ausprobieren » |
| max-content | Legt die maximale Höhe auf die intrinsische maximale Größe des Inhalts fest. | Ausprobieren » |
| min-content | Legt die maximale Höhe auf die intrinsische minimale Größe des Inhalts fest. | Ausprobieren » |
| fit-content | Legt die maximale Höhe auf die fit-content-Größe fest. | Ausprobieren » |
| initial | Setzt diese Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt diese Eigenschaft vom Elternelement. | Ausprobieren » |
Häufige Anwendungsfälle
- Scrollbare Panels. Ein Dropdown, eine Seitenleiste oder ein Chat-Protokoll, das niemals über den viewport hinauswachsen soll: setze
max-heightplusoverflow-y: auto. - Responsive Bilder.
img { max-height: 80vh; }verhindert, dass ein hohes Bild die Bildschirmhöhe überschreitet, und skaliert es trotzdem auf kleinen viewports herunter. - Einklappbare / "Mehr lesen"-Bereiche. Animiere
max-heightvon einem kleinen Wert zu einem größeren, um versteckten Inhalt mit einem CSS-Übergang anzuzeigen (die Animation vonmax-heightfunktioniert dort, wo die Animation vonheight: autonicht funktioniert). - Gleichmäßig wirkende Karten. Das Begrenzen von
max-heightbei Kartenkörpern verhindert, dass in einem Kartenraster eine einzelne Kachel unkontrolliert wächst.
Tipps und Fallstricke
max-heightsetzt nur eine Obergrenze — es zwingt ein Element nicht, diese Höhe zu erreichen. Verwende dafürheightodermin-height.- Ohne einen
overflow-Wert läuft Inhalt, der höher alsmax-heightist, einfach aus der Box heraus. Fügeoverflow: auto(scrollen) oderoverflow: hidden(abschneiden) hinzu, um ihn zu steuern. - Ein Prozentwert bei
max-heighterfordert, dass das Elternelement eine aufgelöste Höhe hat, andernfalls wird er ignoriert. - Denke daran, dass
borderundpaddingzur Box hinzugerechnet werden, sofern du nichtbox-sizingsetzt; das Standard-content-boxmisstmax-heightnur gegen den Inhaltsbereich. - Es gibt eine entsprechende Eigenschaft für die Breite: siehe
max-width.