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 ⁨Juli 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 benutzte 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: white;
}

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(--my-anchor 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 umgebenden Blocks.
none: Kein Limit für die Größe des Kastens.
max-content: Die intrinsisch bevorzugte max-height.
min-content: Die intrinsisch 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>): 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: Begrenzt die maximale Höhe der Marge Box des Elements auf die Höhe seines umgebenden Blocks. Es versucht, die Marge Box in den verfügbaren Raum des umgebenden Blocks zu füllen, verhält sich also auf eine Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Marge Box an, anstatt auf die Box, die durch box-sizing bestimmt wird.

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

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer max-height beim Hineinzoomen zur Erhöhung der Textgröße nicht abgeschnitten werden und/oder andere Inhalte verdecken.

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()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<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> = 
  <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 # sizing-values

Browser-Kompatibilität

Siehe auch

min-height
height
max-inline-size
max-block-size
box-sizing
Einführung in das CSS Box-Modell Leitfaden
CSS Box-Modell Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden