CSS height - Höhe der Elemente festlegen

HTML-Elementen wird mit der Eigenschaft height eine Höhe zugewiesen. Das ist im Grunde bei allen Block-Elementen möglich. Bei Inline-Elementen ist das nur möglich, wenn es sich dabei um Elemente handelt, die replaced sind. Damit werden ersetzte Elemente gemeint, die ihren Ursprung außerhalb der Datei haben, z.B. Bilder.

Bei der Angabe der Höhe mit height gilt das Maß gemäß dem Standard Box-Modell für die Höhe des Inhaltsbereichs, der content-box genannt wird. Sonstige Abstände wie padding oder border werden zur Boxgröße hinzu addiert. Falls man von dem Standard-Modell abweichen möchte, kann man das über die Eigenschaft box-sizing erreichen. Nachfolgend ist die die Syntax für die Höhe anhand eines Beispiels abgebildet.

Angabe des Werts für die Höhe

Als Werte sind nicht nur numerische Angaben mit der Einheit px möglich. Die nachfolgenden Werte und Einheiten kann man ebenfalls angeben. Es kann jedoch sein, dass diese nicht von allen Browsern unterstützt werden. Der Platzhalter <Zahl> ist durch einen numerischen Wert zu ersetzen. In Klammern am Ende jedes Eintrags ist 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)

Bei der prozentualen Angabe ist zu berücksichtigen, dass der Wert sich auf die Höhe des Elternelements bezieht. Die Höhe des Elternelements muss daher explizit bekannt sein.

Höhe mit calc() berechnen

Das Standard Box-Modell führt in vielen Fällen zu unerwünschten Ergebnissen, da etwaige Abstände oder Rahmen zur Größe hinzu addiert werden. Daher entstand bei vielen Entwicklern der Wunsch, insbesondere bei der Angabe von prozentualen Werten die Maße für die Abstände und Rahmen abzuziehen. Ab CSS3 ist eine Berechnung mit calc() möglich.

Innerhalb der runden Klammern kann man angeben, wie der Wert für height berechnet werden soll. Die Syntax ist nachfolgend anhand eines Beispiels abgebildet.

Überschneidungen mit min-height und max-height

Es kann sein, dass man für ein Element neben height die Eigenschaften min-height oder max-height ebenfalls angegeben hat. Beide Eigenschaften überschreiben in solchen Fällen den Wert von height.

Verhalten mit overflow bei übergroßen Inhalten ändern

Falls den Elementen mit height eine Höhe zugewiesen wurde, dann besteht prinzipiell immer die Gefahr, dass der Inhalt zu groß für die Box ist. In solchen Fällen ragen die Inhalte über die Box hinaus.

Das Verhalten kann man über die Eigenschaft overflow beeinflussen. Damit kann man z.B. festlegen, dass der hinausragende Teil abgeschnitten bzw. nicht angezeigt wird. Es ist auch möglich, automatisch Scrollleisten einblenden zu lassen.

In der Praxis wird height häufig für Layoutzwecke verwendet und weniger, um den Platz für die Inhalte zu begrenzen, da diese immer unterschiedlich hoch sein können. Eine häufige Fehlerquelle bei prozentualen Angaben ist, dass die Höhe des Elternelements nicht bekannt ist und der Browser daher keinen Wert ermitteln kann.