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

css
/* <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

Anfangswertauto
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
VererbtNein
ProzentwerteDer 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 Wertder Prozentwert wie angegeben oder die absolute Länge
AnimationstypLä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

css
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
min-height
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
max-content
min-content
stretch
Experimental

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.

Siehe auch