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.

Die min-height CSS Eigenschaft 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, wann immer 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 umgebenden Blocks.
auto: Der Browser berechnet und wählt eine min-height für das angegebene Element.
max-content: Die intrinsische bevorzugte min-height.
min-content: Die intrinsische minimale min-height.
fit-content: Nutzt den verfügbaren Platz, jedoch nicht mehr als max-content, also 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, also min(max-content, max(min-content, argument)).
stretch: Begrenzt die minimale Höhe der Margin-Box des Elements auf die Höhe seines umschließenden Blocks. Es versucht, die Margin-Box auf den verfügbaren Raum im umschließenden Block auszufüllen, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Margin-Box anstatt auf die durch das box-sizing bestimmte Box an.

Hinweis: Um Aliase zu prüfen, die von Browsern für den Wert stretch verwendet werden, sowie deren Implementierungsstatus, siehe den 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

Setzen der min-height

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

BCD tables only load in the browser