max-height

Übersicht

Die max-height Eigenschaft wird verwendet, um die maximale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der height Eigenschaft größer wird als der festgelegte Wert von max-height.

max-height überschreibt height, aber min-height überschreibt max-height.

Initialwert	`none`
Anwendbar auf	alle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
Vererbt	Nein
Prozentwerte	Der Prozentwert wird unter Berücksichtigung der Höhe des die generierte Box beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde (d. h. sie hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Prozentwert wie `none` behandelt.
Berechneter Wert	der Prozentwert wie angegeben oder die absolute Länge oder `none`
Animationstyp	Längenangabe, Prozentsatz oder `calc()`;

Syntax

/* <length> Wert */
max-height: 3.5em;

/* <percentage> Wert */
max-height: 75%;

/* Schlüsselwortwerte */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Globale Werte */
max-height: inherit;
max-height: initial;
max-height: unset;

Werte

<length>: Eine feste Maximalhöhe. Siehe <length> für mögliche Einheiten.
<percentage>: Der <percentage> Wert wird unter Berücksichtigung der Höhe des beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde, wird der prozentuale Wert als none behandelt.
none: Das Element verfügt über keine maximale Höhe.
max-content: Die innere bevorzugte Höhe.
min-content: Die innere Minimalhöhe.
fill-available: Die Höhe des beinhaltenden Blocks minus dem horizontalen Außenabstand, Rand und Innenabstand. Einige Browser implementieren hierfür das veraltete Schlüsselwort available.
fit-content: Hat die gleiche Bedeutung wie max-content.

Formale Syntax

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)wobei 
<length-percentage> = <length> | <percentage>

Beispiele

table { max-height: 75%; }

form { max-height: none; }

Spezifikationen

Spezifikation	Status	Anmerkung
CSS Intrinsic & Extrinsic Sizing Module Level 3 Die Definition von 'max-height' in dieser Spezifikation.	Arbeitsentwurf	Fügt die Schlüsselwörter `max-content`, `min-content`, `fit-content` und `fill-available` hinzu. Die Entwürfe zu CSS3 Box und CSS3 Writing Modes definierten zuvor beide diese Schlüsselwörter. Diese Entwürfe werden durch diese Spezifikation ersetzt.
CSS Transitions Die Definition von 'max-height' in dieser Spezifikation.	Arbeitsentwurf	Definiert `max-height` als animierbar.
CSS Level 2 (Revision 1) Die Definition von 'max-height' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`max-height`	Chrome Vollständige Unterstützung 18	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 1 Hinweise Vollständige Unterstützung 1 Hinweise Hinweise CSS 2.1 leaves the behavior of `max-height` with `table` undefined. Firefox supports applying `max-height` to `table` elements.	IE Vollständige Unterstützung 7	Opera Vollständige Unterstützung 7 Hinweise Vollständige Unterstützung 7 Hinweise Hinweise CSS 2.1 leaves the behavior of `max-height` with `table` undefined. Opera supports applying `max-height` to `table` elements.	Safari Vollständige Unterstützung 1.3	WebView Android Vollständige Unterstützung ≤37	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 14	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung 1.0
`fit-content` Experimentell	Chrome Vollständige Unterstützung 46 Vollständige Unterstützung 46 Vollständige Unterstützung 25 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Vollständige Unterstützung 79 Vollständige Unterstützung 79 Vollständige Unterstützung 79 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Teilweise Unterstützung 3 Mit Präfix Hinweise Teilweise Unterstützung 3 Mit Präfix Hinweise Mit Präfix Benötigt das Herstellerpräfix: -moz- Hinweise Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 44	Safari Vollständige Unterstützung 6.1 Mit Präfix Vollständige Unterstützung 6.1 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Vollständige Unterstützung 2 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `intrinsic`	WebView Android Vollständige Unterstützung 46 Vollständige Unterstützung 46 Vollständige Unterstützung ≤37 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Chrome Android Vollständige Unterstützung 46 Vollständige Unterstützung 46 Vollständige Unterstützung 25 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Android Teilweise Unterstützung 4 Mit Präfix Hinweise Teilweise Unterstützung 4 Mit Präfix Hinweise Mit Präfix Benötigt das Herstellerpräfix: -moz- Hinweise Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	Opera Android Vollständige Unterstützung 43	Safari iOS Vollständige Unterstützung 7 Mit Präfix Vollständige Unterstützung 7 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Vollständige Unterstützung 1 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `intrinsic`	Samsung Internet Android Vollständige Unterstützung 5.0 Vollständige Unterstützung 5.0 Vollständige Unterstützung 1.5 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-
`max-content`	Chrome Vollständige Unterstützung 46	Edge Vollständige Unterstützung 79	Firefox Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 44	Safari Vollständige Unterstützung 11 Vollständige Unterstützung 11 Vollständige Unterstützung 9 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 46	Chrome Android Vollständige Unterstützung 46	Firefox Android Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 4 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android Vollständige Unterstützung 43	Safari iOS Vollständige Unterstützung 11 Vollständige Unterstützung 11 Vollständige Unterstützung 9 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 5.0
`min-content`	Chrome Vollständige Unterstützung 46	Edge Vollständige Unterstützung 79	Firefox Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 44	Safari Vollständige Unterstützung 11 Vollständige Unterstützung 11 Vollständige Unterstützung 9 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 46	Chrome Android Vollständige Unterstützung 46	Firefox Android Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 4 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android Vollständige Unterstützung 43	Safari iOS Vollständige Unterstützung 11 Vollständige Unterstützung 11 Vollständige Unterstützung 9 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 5.0
`stretch` Experimentell	Chrome Vollständige Unterstützung 28 Alternativer Name Vollständige Unterstützung 28 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`	Edge Vollständige Unterstützung 79 Alternativer Name Vollständige Unterstützung 79 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 15 Alternativer Name Vollständige Unterstützung 15 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4 Alternativer Name Vollständige Unterstützung 4.4 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`	Chrome Android Vollständige Unterstützung 28 Alternativer Name Vollständige Unterstützung 28 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 15 Alternativer Name Vollständige Unterstützung 15 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 1.5 Alternativer Name Vollständige Unterstützung 1.5 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-webkit-fill-available`

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Teilweise Unterstützung: Teilweise Unterstützung
Keine Unterstützung: Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.: Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Verwendet einen nicht standardisierten Namen.: Verwendet einen nicht standardisierten Namen.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.