max-height CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
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: 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 die
max-heightals absoluten Wert. <percentage>-
Definiert die
max-heightals Prozentsatz der Höhe des enthaltenden Blocks. none-
Keine Begrenzung der Größe des Elementes.
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, 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 der Marginalbox des Elements auf die Höhe seines enthältenden Blocks. Es versucht, die Marginalbox in den verfügbaren Raum des enthaltenden Blocks zu füllen, verhält sich also ähnlich wie
100%, wendet die resultierende Größe jedoch auf die Marginalbox anstatt auf die Box an, die durch box-sizing bestimmt wird.Hinweis: Um die von Browsern verwendeten Aliase für den
stretch-Wert 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 andere Inhalte nicht 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
Festlegen der max-height mit Prozent- und Schlüsselwortwerten
table {
max-height: 75%;
}
form {
max-height: none;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 4 # sizing-values |