Min-Height Property
Last updated: 2026-09-13
min-height Min-Height Property
The min-height property sets the minimum height of an element, ensuring it keeps a certain height even when its content is short. Its default value, 0, means there is no lower limit. It is often used to keep page sections visually consistent or to pin a footer to the bottom of the page.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | non-replaced |
| Animation Type | length |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
min-height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Values
| Value | Type | Description |
|---|---|---|
0 | Keyword | No minimum height. |
<length> | Type | A fixed minimum height. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： min-height takes precedence over height and max-height, and the element grows automatically when content is taller.
❓ FAQ
QWhat's the difference between min-height and height?
Aheight is a fixed height, so content taller than the set value overflows the box and is visible by default. min-height only sets a lower bound: with short content the element keeps the set height, and with tall content it grows automatically without overflowing. That is why min-height is the safer, more flexible choice for components with unknown content lengths, such as cards, modals, and page bodies.
QHow do I make the page body fill at least one screen?
AGive the main container min-height:100vh. With little content the body still fills at least the viewport height, and with more content it extends downward, so the footer never dangles mid-screen. 100vh means 100% of the viewport height. Unlike height:100vh, min-height lets the page scroll normally once content exceeds one screen instead of being locked to a fixed height. It is the standard pattern for app shells and article pages alike.
QWhich is better: min-height:100vh or height:100vh?
Aheight:100vh fixes the height to the viewport, so longer content overflows or must scroll internally, which suits single-screen apps like mobile activity pages. min-height:100vh guarantees at least one screen while letting the element grow with content, making it ideal for ordinary page layouts. Most websites should use min-height:100vh, and combined with flex it also enables a sticky footer, since the main area can flex to push the footer to the bottom of short viewports.
QWhy doesn't the min-height percentage take effect?
ALike height, a percentage min-height is computed against the parent's content area height, and it fails when the parent's height is auto. To make a child fill the parent's height, the parent needs a definite height first, or you can switch to a flex layout where items stretch automatically, since align-items defaults to stretch. That is the recommended approach in most cases.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
