min-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 min-height
-Eigenschaft CSS legt die Mindesthöhe eines Elements fest. Sie verhindert, dass der verwendete Wert der height
-Eigenschaft kleiner wird als der für min-height
angegebene Wert.
Probieren Sie es aus
Die Höhe des Elements wird auf den Wert von min-height
gesetzt, wenn min-height
größer ist als max-height
oder height
.
Syntax
/* <length> value */
min-height: 3.5em;
min-height: anchor-size(height);
min-height: anchor-size(--myAnchor block, 200px);
/* <percentage> value */
min-height: 10%;
/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fit-content(20em);
min-height: stretch;
/* Global values */
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: revert-layer;
min-height: unset;
Werte
<length>
-
Definiert die
min-height
als absoluten Wert. <percentage>
-
Definiert die
min-height
als Prozentsatz der Höhe des umschließenden Blocks. auto
-
Der Browser berechnet und wählt eine
min-height
für das angegebene Element aus. max-content
-
Die intrinsisch bevorzugte
min-height
. min-content
-
Die intrinsische minimale
min-height
. fit-content
-
Nutzt 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 mit dem verfügbaren Platz, der durch das angegebene Argument ersetzt wird, d.h.min(max-content, max(min-content, argument))
. stretch
-
Begrenzt die minimale Höhe der Margenbox des Elements auf die Höhe seines umschließenden Blocks. Es versucht, die Margenbox so zu erweitern, dass sie den verfügbaren Platz im umschließenden Block ausfüllt, und verhält sich in gewisser Weise ähnlich wie
100%
, wobei die resultierende Größe jedoch auf die Margenbox und nicht auf die durch box-sizing bestimmte Box angewendet wird.Hinweis: Informationen zu Aliassen, die von Browsern für den Wert
stretch
verwendet werden, und zu dessen Implementierungsstatus finden Sie im Abschnitt Browser-Kompatibilität.
Formale Definition
Anfangswert | auto |
---|---|
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 0 behandelt. |
Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Formale Syntax
min-height =
auto |
<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
min-height festlegen
table {
min-height: 75%;
}
form {
min-height: 0;
}
Spezifikationen
Specification |
---|
CSS Box Sizing Module Level 3 # width-height-keywords |
CSS Box Sizing Module Level 4 # sizing-values |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
min-height | ||||||||||||
anchor-size() | ||||||||||||
auto | ||||||||||||
fit-content | ||||||||||||
fit-content() | ||||||||||||
max-content | ||||||||||||
min-content | ||||||||||||
stretch |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.