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 übersteuert height, aber min-height übersteuert 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 die max-height als absoluten Wert.
<percentage>: Definiert die max-height als Prozentsatz der Höhe des umschließenden Blocks.
none: Keine Begrenzung der Größe des Kastens.
max-content: Die intrinsisch bevorzugte max-height.
min-content: Die intrinsische Mindesthöhe max-height.
fit-content: Nutzt den verfügbaren Platz, jedoch nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>): Verwendet die fit-content-Formel, wobei der verfügbare Platz durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).
stretch: Begrenzung der maximalen Höhe des Margin-Kastens des Elements auf die Höhe des umschließenden Blocks. Es versucht, den Margin-Kasten so zu füllen, dass er den verfügbaren Platz im umschließenden Block einnimmt, ähnlich wie 100%, wobei die resultierende Größe jedoch auf den Margin-Kasten und nicht auf den durch box-sizing bestimmten Kasten angewendet wird.

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

Barrierefreiheit

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

Formale Definition

Initialer Wert	`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

Festlegen von max-height mit Prozentwerten und Schlüsselwörtern

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