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 Experimental: Die innere bevorzugte Höhe.
min-content Experimental: Die innere Minimalhöhe.
fill-available Experimental: 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 Experimental: Hat die gleiche Bedeutung wie max-content.

Formale Syntax

max-height = 
  none                                |
  <length-percentage>                 |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

table { max-height: 75%; }

form { max-height: none; }

Spezifikationen

Spezifikation	Status	Anmerkung
CSS Box 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

BCD tables only load in the browser