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-Eigenschaft von CSS 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 spezifizierte 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
/* <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
max-heightals absoluten Wert. <percentage>-
Definiert
max-heightals Prozentsatz der Höhe des umgebenden Blocks. none-
Keine Begrenzung der Box-Größe.
max-content-
Die intrinsisch bevorzugte
max-height. min-content-
Die intrinsisch minimale
max-height. fit-content-
Nutzt den verfügbaren Raum, 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 Raum, der durch das angegebene Argument ersetzt wird, d.h.min(max-content, max(min-content, argument)). stretch-
Begrenzung der maximalen Höhe der Margin-Box des Elements auf die Höhe des enthältenden Blocks. Es wird versucht, die Margin-Box so zu füllen, dass sie den verfügbaren Raum im enthältenden Block einnimmt, und verhält sich damit ähnlich wie
100%, wendet die resultierende Größe jedoch auf die Margin-Box an anstatt auf die Box, die durch box-sizing bestimmt wird.Hinweis: Um die von Browsern für den
stretch-Wert verwendeten Aliase und den Implementierungsstatus zu überprüfen, sehen Sie sich den Abschnitt zur Browser-Kompatibilität an.
Barrierefreiheit
Stellen Sie sicher, dass Elemente, die mit max-height gesetzt sind, nicht abgeschnitten werden und/oder keinen 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()> |
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
Festlegung von max-height mit prozentualen und Schlüsselwortwerten
table {
max-height: 75%;
}
form {
max-height: none;
}
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 4 # sizing-values |