`min-height` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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: white;
}

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(--my-anchor 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, aber 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 Raum durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).
stretch: Begrenzt die Mindesthöhe der margin box des Elements auf die Höhe seines umgebenden Blocks. Es versucht, die margin box zu füllen, die im umgebenden Block verfügbar ist, wobei es sich auf eine Weise ähnlich wie 100% verhält, aber die resultierende Größe auf die margin box und nicht auf die Box anwendet, die durch box-sizing bestimmt wird.

Hinweis: Um Aliase, die von Browsern für den Wert stretch verwendet werden, und deren Implementierungsstatus zu überprüfen, 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()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

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

Festlegung von min-height

css

table {
  min-height: 75%;
}

form {
  min-height: 0;
}

Spezifikationen

Spezifikation
CSS Box Sizing Module Level 4 # sizing-values

Browser-Kompatibilität

Siehe auch

max-height
height
min-inline-size
min-block-size
box-sizing
Einführung in das CSS-Box-Modell Leitfaden
CSS-Box-Modell Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

min-height CSS property

Help improve MDN

`min-height` CSS property