CSS max-height - Maximale Höhe der HTML-Elemente festlegen

HTML-Elemente werden in der Standardeinstellung durch die Inhalte vergrößert. Hierbei kann man über die Eigenschaft max-height eine maximale Höhe festlegen, die nicht überschritten wird. Sind darüber hinaus weitere Inhalte vorhanden, ragen diese aus dem Bereich heraus. Das Verhalten kann jedoch verändert werden.

Verhalten der Elemente bei max-height

Man kann die Eigenschaft max-height im Grunde allen Block-Elementen zuweisen. Das ist auch bei Inline-Elementen möglich, jedoch nur bei den Elementen, die ersetzt sind. Diese werden auch replaced genannt. Damit sind Elemente gemeint, die ihren Ursprung außerhalb der Datei haben und den Inhalt ersetzen, wie das z.B. bei Bildern der Fall ist. Auf der folgenden Abbildung ist ein Beispiel-Code, aus der die Syntax ersichtlich ist.

CSS-Code für max-height

Angabe des Werts für die maximale Höhe

Man hat neben einem numerischen Wert mit der Einheit px noch viele weitere Möglichkeiten für die Angabe des Werts, die nachfolgend aufgelistet sind. Nicht alle Browser unterstützen diese jedoch und man sollte sie vor dem Einsatz mit den gängigsten Browsern testen. Der Platzhalter <Zahl> ist für eine numerischen Angabe gedacht. In runden Klammern am Ende ist jeweils eine kurze Erläuterung.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bezieht sich auf das umgebende Block-Element)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • auto (Standardwert, überlässt die Berechnung dem Browser)
  • inherit (Vererbt vom Elternelement)
  • initial (Setzt auf den Standardwert)

Sonstige Keyword-Werte (zum Teil experimentell)

  • min-content (Kleinste intrinsische Höhe)
  • max-content (Bevorzugte intrinsische Höhe)
  • fit-content (Passend zum Inhalt)
  • available (Verfügbare Höhe)
  • border-box (Zusatz, falls genutzt, gilt Wert/Einheit für border-box)
  • content-box (Zusatz, falls genutzt, gilt Wert/Einheit für content-box)
  • unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Die prozentuale Angabe bezieht sich auf die Höhe des Elternelements, die bekannt sein muss, da die Browser die Höhe ansonsten nicht berechnen können.

Maximale Höhe mit calc() berechnen

Der Wert, der für max-height angegeben wird, gilt beim Standard CSS Box-Modell für den Bereich content-box. Damit ist der Inhaltsbereich ohne Abstände und etwaige Rahmen gemeint. Diese werden hinzu addiert. Das kann insbesondere bei prozentualen Höhenangaben zu unerwünschten Ergebnissen führen. Ab CSS3 kann man mit box-sizing das Box-Modell umstellen, damit der Wert sich auf einen Bereich inkl. dem Innenabstand (padding) und Rahmen (border) bezieht. Eine andere Möglichkeit ist, die Maße für padding und border von dem Wert abzuziehen. Ab CSS3 ist eine Berechnung mit calc() möglich. Die Berechnung für den Wert wird dabei innerhalb der runden Klammern angegeben. Die Syntax ist auf der folgenden Abbildung ersichtlich.

max-height mit calc berechnen

Überschneidungen mit height und min-height

Es kann vorkommen, dass man einem Element für die Höhe neben max-height zusätzlich height oder min-height angibt. In solchen Fällen überschreibt max-height die Einstellung von height und max-height wird wiederum von min-height überschrieben.

Verhalten bei großen Inhalten mit overflow festlegen

Mit der Eigenschaft max-height begrenzt man die Höhe eines Elements auf einen bestimmten Wert. Das führt dazu, dass übergroße Inhalte über den Rand hinausragen.

Übergroße Inhalte bei Angabe von max-height

Das Hinausragen der Inhalte kann über die Eigenschaft overflow beeinflusst werden. Man kann damit beispielsweise festlegen, der der hinausragende Teil versteckt bzw. nicht angezeigt wird. Man kann auch automatisch Scrollleisten einblenden lassen.

overflow bei Element mit max-height

In der Praxis kann max-height z.B. bei Websites mit responsive Design sinnvoll sein, damit die Höhe der Elemente bei geringeren Breiten nicht zu groß wird. Ein anderer sinnvoller Einsatz kann z.B. bei der Darstellung von langem Programmiercode sein. Damit die Benutzer die Inhalte sinnvoll angezeigt bekommen, kann man z.B. Scrollleisten anzeigen lassen.