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.

Initialwertnone
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
VererbtNein
ProzentwerteDer 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.
Medienvisuell
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge oder none
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
max-heightChrome Vollständige Unterstützung 18Edge Vollständige Unterstützung 12Firefox 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 7Opera 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.3WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
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 Keine Unterstützung NeinFirefox 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 NeinOpera Vollständige Unterstützung 44Safari 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 43Safari 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
max-contentChrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox 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 NeinOpera Vollständige Unterstützung 44Safari 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 46Chrome Android Vollständige Unterstützung 46Firefox 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 43Safari 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-contentChrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox 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 NeinOpera Vollständige Unterstützung 44Safari 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 46Chrome Android Vollständige Unterstützung 46Firefox 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 43Safari 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 Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera 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 NeinWebView 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 NeinOpera 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 NeinSamsung Internet Android Keine Unterstützung Nein

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.

Siehe auch