min-height
The min-height property sets a lower bound on an element's height, overriding height when larger.
Syntax
min-height: <length|%|auto|min-content>;
Examples
.page { min-height: 100dvh; display: flex; flex-direction: column; }
.hero { min-height: 480px; }
Output
Ensures the page is at least the viewport tall (enabling a sticky footer) and the hero never collapses below 480px.
Notes
min-height lets content grow beyond the floor without clipping, unlike a fixed height. The flex/grid default min-height:auto can prevent shrinking; set min-height:0 to allow overflow scrolling.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |