min-height
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
.
Try it
The element's height is set to the value of min-height
whenever min-height
is larger than max-height
or height
.
Syntax
css
/* <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-height
as an absolute value. <percentage>
-
Defines the
min-height
as a percentage of the containing block's height. auto
-
The browser will calculate and select a
min-height
for the specified element. max-content
-
The intrinsic preferred
min-height
. min-content
-
The intrinsic minimum
min-height
. fit-content(
<length-percentage>
)-
Uses the
fit-content
formula 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 but non-replaced inline elements, table columns, and column groups |
Inherited | no |
Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0 . |
Computed value | the percentage as specified or the absolute length |
Animation type | a length, percentage or calc(); |
Formal syntax
min-height =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
Examples
Setting min-height
css
table {
min-height: 75%;
}
form {
min-height: 0;
}
Specifications
Specification |
---|
CSS Box Sizing Module Level 3 # width-height-keywords |
Browser compatibility
BCD tables only load in the browser