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 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

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, 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 enthaltenen 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 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

Begrentzt die Mindesthöhe der Außenkante des Elements auf die Höhe seines umschließenden Blocks. Es versucht, die Außenkante so zu vergrößern, dass sie den verfügbaren Platz im umschließenden Block ausfüllt, ähnlich wie bei 100%, aber die resultierende Größe wird auf die Außenkante angewandt und nicht auf die Box, die durch box-sizing bestimmt wird.

Hinweis: Um Aliase zu prüfen, die von Browsern für den stretch-Wert verwendet werden, und ihren Implementierungsstatus zu sehen, schauen Sie in den 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 einstellen

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

Siehe auch