Ü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. |
Medien | visuell |
Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge oder none |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Kanonische Reihenfolge | die 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 alsnone
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
max-height | Chrome Vollständige Unterstützung 18 | Edge Vollständige Unterstützung 12 | Firefox
Vollständige Unterstützung
1
| IE Vollständige Unterstützung 7 | Opera
Vollständige Unterstützung
7
| 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 Ja | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android Vollständige Unterstützung Ja |
fit-content | Chrome
Vollständige Unterstützung
46
| Edge Keine Unterstützung Nein | Firefox
Teilweise Unterstützung
3
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 44 | Safari
Vollständige Unterstützung
6.1
| WebView Android
Vollständige Unterstützung
46
| Chrome Android
Vollständige Unterstützung
46
| Firefox Android
Teilweise Unterstützung
4
| Opera Android Vollständige Unterstützung 43 | Safari iOS
Vollständige Unterstützung
7
| Samsung Internet Android Vollständige Unterstützung 5.0 |
max-content | Chrome Vollständige Unterstützung 46 | Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
66
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 44 | Safari
Vollständige Unterstützung
11
| WebView Android Vollständige Unterstützung 46 | Chrome Android Vollständige Unterstützung 46 | Firefox Android
Vollständige Unterstützung
66
| Opera Android Vollständige Unterstützung 43 | Safari iOS
Vollständige Unterstützung
11
| Samsung Internet Android Vollständige Unterstützung 5.0 |
min-content | Chrome Vollständige Unterstützung 46 | Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
66
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 44 | Safari
Vollständige Unterstützung
11
| WebView Android Vollständige Unterstützung 46 | Chrome Android Vollständige Unterstützung 46 | Firefox Android
Vollständige Unterstützung
66
| Opera Android Vollständige Unterstützung 43 | Safari iOS
Vollständige Unterstützung
11
| Samsung Internet Android Vollständige Unterstützung 5.0 |
stretch | Chrome
Vollständige Unterstützung
28
| Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera
Vollständige Unterstützung
15
| Safari Keine Unterstützung Nein | WebView Android
Vollständige Unterstützung
4.4
| Chrome Android
Vollständige Unterstützung
28
| Firefox Android Keine Unterstützung Nein | Opera Android
Vollständige Unterstützung
15
| Safari iOS Keine Unterstützung Nein | Samsung 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.