Ü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 alsnonebehandelt. 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
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 1.0 | 1.0 (1.7 oder früher) | 7.0 | 7.0 | 1.0 |
kann auf <table> angewendet werden[1] |
Nicht unterstützt | (Ja) | Nicht unterstützt | (Ja) | Nicht unterstützt |
max-content, min-content und fit-content |
Nicht unterstützt [3] | 3.0 (1.9)-moz [2] | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt [3] |
fill-available |
Nicht unterstützt | Nicht unterstützt Bug 527285 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
| Merkmal | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | ? | ? | ? | ? | ? |
kann auf <table> angewendet werden[1] |
Nicht unterstützt | (Ja) | Nicht unterstützt | (Ja) | Nicht unterstützt |
max-content, min-content und fit-content |
Nicht unterstützt [3] | 3.0 (1.9)-moz [2] | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt [3] |
fill-available |
Nicht unterstützt | Nicht unterstützt Bug 527285 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
[1] CSS 2.1 lässt das Verhalten von max-height innerhalb <table> Elementen explizit undefiniert. Daher ist jedes Verhalten CSS2.1 konform; neuere CSS Spezifikationen definieren möglicherweise dieses Verhalten, daher sollten sich Webentwickler aktuell nicht auf ein bestimmtes Verhalten verlassen.
[2] Gecko implementiert die Definitionen von CSS3 Basic Box experimentell. Diese Spezifikation definiert available und nicht fill-available. Darüberhinaus ist die Definition von fit-content einfacher als in CSS3 Sizing.
[3] WebKit implementiert einen früheren Vorschlag, um die Höhe auf eine echte Höhe zu setzen: die Schlüsselwörter intrinsic anstatt max-content und min-intrinsic anstatt min-content. Es gibt kein Äquivalent zu fill-available oder fit-content.