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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

Die min-height CSS Eigenschaft legt die Mindesthöhe eines Elements fest. Sie verhindert, dass der benutzte Wert der height Eigenschaft kleiner wird als der für min-height angegebene Wert.

Probieren Sie es aus

min-height: 150px;

min-height: 7em;

min-height: 75%;

min-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 minimum height. <br />If there is
    more content than the minimum the box will grow to the height needed by the
    content.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

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 umschließenden 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: Verwendet den verfügbaren Raum, aber 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 Raum, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).
stretch: Beschränkt die Mindesthöhe der Margin-Box des Elements auf die Höhe seines umschließenden Blocks. Es wird versucht, die Margin-Box so zu gestalten, dass sie den verfügbaren Raum im umschließenden Block ausfüllt, was in gewisser Weise dem Verhalten von 100% ähnelt, jedoch die resultierende Größe auf die Margin-Box anstatt auf die durch box-sizing bestimmte Box anwendet.

Hinweis: Um Aliase zu überprüfen, die von Browsern für den stretch Wert verwendet werden und den Status der Implementierung zu sehen, schauen Sie im Abschnitt Browser-Kompatibilität nach.

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

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