max-height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die max-height CSS-Eigenschaft legt die maximale Höhe eines Elements fest. Sie verhindert, dass der verwendete Wert der height-Eigenschaft größer wird als der für max-height angegebene Wert.

Probieren Sie es aus

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

Syntax

css

/* <length> value */
max-height: 3.5em;
max-height: anchor-size(height);
max-height: calc(anchor-size(--myAnchor self-block, 250px) + 2em);

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

/* Keyword values */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fit-content(20em);
max-height: stretch;

/* Global values */
max-height: inherit;
max-height: initial;
max-height: revert;
max-height: revert-layer;
max-height: unset;

Werte

<length>: Definiert max-height als absoluten Wert.
<percentage>: Definiert max-height als Prozentsatz der Höhe des umschließenden Blocks.
none: Keine Begrenzung für die Größe der Box.
max-content: Die intrinsische bevorzugte max-height.
min-content: Die intrinsische minimale max-height.
fit-content: Verwendet den verfügbaren Platz, aber nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>): Verwendet die fit-content-Formel mit dem verfügbaren Platz, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).
stretch: Beschränkt die maximale Höhe der Margin-Box auf die Höhe ihres umschließenden Blocks. Es versucht, die Margin-Box an den verfügbaren Raum im umschließenden Block anzupassen, verhält sich also in gewisser Weise ähnlich wie 100%, wendet dabei jedoch die resultierende Größe auf die Margin-Box anstatt auf die Box, die durch box-sizing bestimmt wird.

Hinweis: Um die von Browsern verwendeten Aliase für den stretch-Wert und dessen Implementierungsstatus zu überprüfen, siehe den Abschnitt Browser-Kompatibilität.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer max-height nicht abgeschnitten werden und/oder anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

Formale Definition

Anfangswert	`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()`;

Formale Syntax

max-height = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Beispiele

Setzen von max-height mit Prozentsatz und Schlüsselwortwerten

css

table {
  max-height: 75%;
}

form {
  max-height: none;
}

Spezifikationen

Specification
CSS Box Sizing Module Level 4 # width-height-keywords
CSS Box Sizing Module Level 4 # sizing-values

Browser-Kompatibilität

BCD tables only load in the browser