CSS 2.1: `min-height, max-height`

Erläuterungen

Diese Eigenschaften erlauben es, einen kleinstmöglichen bzw. einen größtmöglichen Wert für die Elementhöhe zu deklarieren. Die Eigenschaften max-height und min-height wirken zusammen, sie sind aber nur zwei der Eigenschaften, die den berechneten Wert der Elementhöhe beeinflussen.

Die endgültige vertikale Lage und Ausdehnung eines Elements kann von einer ganzen Reihe anderer Eigenschaften (siehe unter Wechselwirkungen) sowie der Höhe des umschließenden Blocks abhängig sein. Die folgenden drei Punkte verdeutlichen, wie die Berechnung der Elementhöhe durch max-height und min-height beeinflusst wird. Diese Schleife kann auch mehrmals durchlaufen werden. Die Beschreibung klingt zwar etwas kompliziert, aber es hilft, sich das Ganze einmal grafisch vorzustellen.

Der berechnete Wert für die Höhe des Elements wird vorläufig unter Berücksichtigung der gegebenen anderen Werte bestimmt. Hierbei werden max-height und min-height noch nicht mit einbezogen.
Wenn der berechnete Wert für min-height größer als der Wert für max-height ist, dann erhält max-height denselben Wert wie min-height.
1. Wenn die berechnete Höhe des Elementes größer als der für max-height gegebene Wert ist, dann wird die Elementhöhe nach Punkt 1 erneut bestimmt, jedoch geht der Wert für max-height als aktueller Wert für die Elementhöhe in die Berechnung ein.
2. Wenn die berechnete Höhe des Elementes kleiner als der für min-height gegebene Wert ist, dann wird die Elementhöhe nach Punkt 1 erneut bestimmt, jedoch geht der Wert für min-height als aktueller Wert für die Elementhöhe in die Berechnung ein.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'min-height' <length> | <percentage> | inherit

'max-height' <length> | <percentage> | none | inherit

<length>: Eine absolute oder relative Längenangabe. Negative Werte sind nicht erlaubt.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Eine Prozentangabe, die auf die Höhe des umschließenden Blocks des Elements bezogen ist, falls dessen Höhe explizit deklariert ist. Ist das nicht der Fall, wird der deklarierte Wert wie none interpretiert.
none (Ausgangswert) (nur für max-height möglich): Das Element hat keine festgelegte maximale Höhe.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

DIV.illustration { min-height: 500px; }

DIV.abstand { max-height: 50%; }

Browserunterstützung

Die Eigenschaften max-height und min-height werden von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE 7: IE 7 verarbeitet diese Eigenschaften korrekt.
IE/Win 5.5, IE/Win 6: IE/Win bis Version 6 erkennt beide Eigenschaften nicht.
IE/Mac 5.5: IE/Mac unterstützt beide Eigenschaften nicht.
Safari 1.2: Der Apple-Browser unterstützt diese Eigenschaften nicht.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

top, margin-top, border-top-width, padding-top,
height, min-height,
padding-bottom, border-bottom-width, margin-bottom, bottom

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Deshalb sollte man sie nicht verwenden, auch wenn sie von einigen wenigen Kleingeräte-Browsern, unter ihnen Opera Handheld, realisiert wird.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`none`	Spezifizierter `%`-Wert oder absolute Länge oder `none`	Nein	Auf alle Elemente, Ausnahme: nicht-replazierte Inline- Level- Elemente und Tabellen	Höhe des umschließenden Blocks	Visual