The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
The element's height is set to the value of min-height whenever min-height is larger than max-height or height.
Syntax
/* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* Keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* Global values */ min-height: inherit; min-height: initial; min-height: revert; min-height: revert-layer; min-height: unset;
Values
<length>-
Defines the
min-heightas an absolute value. <percentage>-
Defines the
min-heightas a percentage of the containing block's height. auto-
The browser will calculate and select a
min-heightfor the specified element. max-content-
The intrinsic preferred
min-height. min-content-
The intrinsic minimum
min-height. fit-content(<length-percentage>)-
Uses the
fit-contentformula with the available space replaced by the specified argument, i.e.min(max-content, max(min-content, argument)).
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements that accept width or height |
| Inherited | no |
| Computed value | as specified, with <length-percentage> values computed |
| Animation type | by computed value, recursing into fit-content() |
Formal syntax
auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)
Examples
Setting min-height
table {
min-height: 75%;
}
form {
min-height: 0;
}