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.

* Some parts of this feature may have varying levels of support.

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

Probieren Sie es aus

max-height: 150px;

max-height: 7em;

max-height: 75%;

max-height: 10px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the maximum height. <br />This will limit
    how tall the box can be, potentially causing an overflow.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

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 die max-height als absoluten Wert.

<percentage>

Definiert die max-height als Prozentsatz der Höhe des enthaltenden Blocks.

none

Keine Begrenzung der Boxgröße.

max-content

Die intrinsische bevorzugte max-height.

min-content

Die intrinsische minimale max-height.

fit-content

Nutzt den verfügbaren Platz, aber nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Nutzt die fit-content-Formel mit dem verfügbaren Platz, ersetzt durch das angegebene Argument, d.h. min(max-content, max(min-content, argument)).

stretch

Begrenzung der maximalen Höhe der Randbox (margin box) des Elements auf die Höhe seines enthaltenden Blocks. Der Versuch, die Randbox den verfügbaren Platz im enthaltenden Block füllen zu lassen, sodass sie in gewisser Weise ähnlich wie 100% funktioniert, aber die resultierende Größe auf die Randbox anwendet und nicht auf die durch box-sizing bestimmte Box.

Hinweis: Um zu überprüfen, welche Aliase von Browsern für den stretch-Wert verwendet werden und um den Implementierungsstatus zu sehen, schauen Sie in den Abschnitt Browser-Kompatibilität.

Barrierefreiheit

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

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
VererbtNein
ProzentwerteDer 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 Wertder Prozentwert wie angegeben oder die absolute Länge oder none
AnimationstypLä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 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

Siehe auch