CSS min-height - Mindesthöhe der HTML-Elemente festlegen

Normalerweise sind HTML-Elemente nur so hoch wie der Inhalt. Über die Eigenschaft min-height kann man den Elementen auch eine Mindesthöhe zuweisen. So erhalten sie eine initiale Höhe. Bei größeren Inhalten wird die Box automatisch vergrößert.

Verhalten der Elemente bei min-height

Die Eigenschaft min-height kann man Block-Elementen zuweisen. Bei Inline-Elementen ist das auch möglich, jedoch nur bei den Elementen, die replaced sind. Mit replaced sind ersetzte Elemente gemeint, die ihren Ursprung außerhalb der Datei haben und den Inhalt ersetzen. Das ist beispielsweise bei Bildern der Fall. Auf dem folgenden Bild ist die Syntax für min-height anhand eines Beispiels abgebildet.

CSS-Code für min-height

Angabe des Werts für die Mindesthöhe

Der Wert für min-height muss nicht immer numerisch und mit der Einheit px sein. Nachfolgend ist eine Auflistung über mögliche Werte und Einheiten, wobei diese nicht von allen Browsern unterstützt werden. Der Platzhalter <Zahl> ist für eine numerische Angabe und am Ende jedes Eintrags ist eine kurze Erläuterung in runden Klammern.

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)

Bei der prozentualen Angabe muss berücksichtigt werden, dass es sich auf die Höhe des Elternelements bezieht, die explizit bekannt sein muss. Sonst können die Browser die Höhe nicht berechnen.

Mindesthöhe mit calc() berechnen

Das Standard Box-Modell sieht vor, dass das Maß für die Höhe bzw. Mindesthöhe sich auf den Inhaltsbereich bezieht, der content-box genannt wird. Zusätzliche Abstände oder Rahmen werden dazu addiert und vergrößern die Box. Wenn man davon abweichen möchte, kann man ab CSS3 das Box-Modell mit box-sizing umstellen. Eine Alternative dazu ist die Berechnung mit calc(). Hierbei kann man als Wert eine Berechnung angeben und somit z.B. die zusätzlichen Abstände und Rahmen davon abziehen. Auf der folgenden Abbildung ist die Syntax anhand eines Beispiels abgebildet.

min-height mit calc berechnen

Überschneidungen mit height und max-height

Es kann vorkommen, dass man einem Element neben min-height auch die Eigenschaften height oder max-height zuweist. In diesen Fällen überschreibt min-height die übrigen Angaben.

Verhalten der Elemente bei übergroßen Inhalten

Wenn man einem Element die Eigenschaft min-height zuweist, dann vergrößert sich die Box bei übergroßen Inhalten. Das lässt sich auch nicht dadurch beschränken, indem man dem Elternelement eine Höhe zuweist. In dem Fall ragt der Inhalt über den Rand des Elternelements hinaus.

Übergroße Inhalte bei Angabe von min-height

Wenn man nicht möchte, dass die Inhalte des Kindelements mit der Eigenschaft min-height über den Rand des Elternelements hinausragen, kann man das Verhalten über die Eigenschaft overflow (beim Elternelement) ändern. Man kann z.B. über den Wert hidden den hinausragenden Teil verstecken oder automatisch Scrollleisten einblenden lassen.