CSS propertyBox model
min-height
Sets a minimum height, while letting the element grow with its content.
- Initial value
auto- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- all elements except non-replaced inline elements (e.g. `<span>`), table rows, and row groups
- JavaScript
element.style.minHeight = "120px"
Example
#CSS
.empty-state {
min-height: 120px;
display: grid;
place-items: center;
}Example HTML
<div class="empty-state stage">You don’t have any completed tasks yet</div>Preview
Definition and usage
#The min-height property guarantees that an element is at least the given height. If there’s more content, the element simply grows. It’s a safer alternative to a fixed height.
You’ll often see it on above-the-fold sections, cards that should share an equal height, and empty list states that shouldn’t collapse.
When min-height is larger than height or max-height, min-height wins.
Syntax
#Syntax
min-height: auto | <length> | <percentage> | min-content | max-content;Values
#Values in practice
#auto
The height comes solely from the content.
.demo { min-height: auto; }100px
The element is at least 100px tall, and it grows with more content.
.demo { min-height: 100px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For full-screen sections on phones,
100svhor100dvhwork better than100vh, since they account for the address bar. - Lining up cards in a single row is easier with Flexbox or Grid than with a fixed
min-height.
Related entries
#Spotted a mistake or missing an example? Write to us.