min-height
Sets the minimum height of an element. It prevents the element from becoming shorter than the specified value, which is useful for ensuring a section always has some height even if it's empty.
Quick example
.hero-section {
min-height: 80vh;
display: flex;
align-items: center;
/* ensures the hero section always takes up most of the screen */
}Quick facts
Initial value
autoInherited
No
Applies to
all elements but non-replaced and table columns
Animation type
lpc
Values
autolength-percentagemin-contentmax-contentfit-contentcalc-sizeanchor-size min-height Browser Support
Widely available Since 2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
1+
3+
1.3+
12+