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 CSS-Eigenschaft max-height legt die maximale Höhe eines Elements fest. Sie verhindert, dass der verwendete Wert der Eigenschaft height größer wird als der für max-height angegebene Wert.
max-height überschreibt height, aber min-height überschreibt max-height.
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;
}
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 enthaltenden Blocks. none-
Keine Begrenzung für die Größe der Box.
max-content-
Die intrinsisch bevorzugte
max-height. min-content-
Die intrinsische minimale
max-height. fit-content-
Verwendet 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-
Begrenzt die maximale Höhe der margin box des Elements auf die Höhe seines enthaltenden Blocks. Es wird versucht, die margin box den verfügbaren Platz im enthaltenden Block ausfüllen zu lassen, sodass sich dies ähnlich wie
100%verhält, die resultierende Größe jedoch auf die margin box statt auf die durch box-sizing bestimmte Box angewendet wird.Hinweis: Informationen zu von Browsern für den Wert
stretchverwendeten Aliasnamen und zu dessen Implementierungsstatus finden Sie im Abschnitt Browser-Kompatibilität.
Barrierefreiheit
Stellen Sie sicher, dass Elemente mit einer gesetzten max-height beim Zoomen der Seite zur Vergrößerung 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 |
<box-size> |
<anchor-size()> |
contain |
fit-content( <length-percentage [0,∞]> )
<box-size> =
<length-percentage> |
stretch |
contain |
min-content |
max-content |
fit-content |
fit-content( ) |
calc-size( )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<length-percentage> =
<length> |
<percentage>
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
max-height mithilfe von Prozent- und Schlüsselwortwerten festlegen
table {
max-height: 75%;
}
form {
max-height: none;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 3 # sizing-values |