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 CSS-Eigenschaft min-height legt die Mindesthöhe eines Elements fest. Sie verhindert, dass der verwendete Wert der Eigenschaft height kleiner wird als der für min-height angegebene Wert.
Die Höhe des Elements wird auf den Wert von min-height gesetzt, wenn min-height größer ist als max-height oder height.
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;
}
Syntax
/* <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
min-heightals absoluten Wert. <percentage>-
Definiert
min-heightals Prozentsatz der Höhe des enthaltenden Blocks. auto-
Der Browser berechnet und wählt einen
min-heightfür das angegebene Element aus. max-content-
Die intrinsisch 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-
Begrenzt die Mindesthöhe der Margin-Box des Elements auf die Höhe seines enthaltenden Blocks. Es wird versucht, die Margin-Box den verfügbaren Platz im enthaltenden Block ausfüllen zu lassen, sodass sich dies ähnlich wie
100%verhält, die resultierende Größe jedoch auf die Margin-Box statt auf die durch box-sizing bestimmte Box angewendet wird.Hinweis: Informationen zu den von Browsern für den Wert
stretchverwendeten Aliasen und zu dessen Implementierungsstatus finden Sie im 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 |
<box-size> |
<anchor-size()> |
contain |
fit-content( <length-percentage [0,∞]> )
<box-size> =
<length-percentage> |
stretch |
contain |
min-content |
max-content |
fit-content |
fit-content( ) |
calc-size( )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<length-percentage> =
<length> |
<percentage>
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
min-height festlegen
table {
min-height: 75%;
}
form {
min-height: 0;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 3 # sizing-values |