CSS 2.1 ::Referenz ::Eigenschaften
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
undmin-height
noch nicht mit einbezogen. - Wenn der berechnete Wert für
min-height
größer als der Wert fürmax-height
ist, dann erhältmax-height
denselben Wert wiemin-height
. - 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ürmax-height
als aktueller Wert für die Elementhöhe in die Berechnung ein. - 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ürmin-height
als aktueller Wert für die Elementhöhe in die Berechnung ein.
- Wenn die berechnete Höhe des Elementes größer als der für
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 ein für
min-height
deklarierter Wert wie0
interpretiert und ein für max-height deklarierter Wert wird wienone
interpretiert. none
(nur fürmax-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
,
max-height
, 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): |
---|---|---|---|---|---|
0 |
Spezifizierter % -Wert oder absolute Länge |
Nein | Auf alle Elemente, Ausnahme: nicht-replazierte Inline- Level- Elemente und Tabellen | Höhe des umschließenden Blocks | Visual |
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.