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.
It is documented as part of the CSS Box Sizing specification.
Syntax
/* Usage Example */
.hero-section {
min-height: 80vh;
display: flex;
align-items: center;
/* ensures the hero section always takes up most of the screen */
}
/* Syntax */
min-height: auto;
min-height: length-percentage;
min-height: min-content;
min-height: max-content;
min-height: fit-content;
min-height: calc-size;
min-height: anchor-size;
/* Global values */
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: revert-layer;
min-height: unset;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.
1+
3+
1.3+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more