min-height
The minimum height: the element is at least this tall, but can grow.
Syntax
min-height: value;Values
| Parameter | Type | Description |
|---|---|---|
| px | length | A minimum in pixels. |
| vh | dvh | length | A share of the window height; `min-height: 100dvh` fills the screen. |
Examples
Cards of the same minimum height:
<style>
.card { min-height: 80px; padding: 8px; background: honeydew; margin-bottom: 6px; }
</style>
<div class="card">Short text</div>
<div class="card">A longer text makes the card taller than its minimum if needed — it is never cut off, because min-height only sets the lower limit and the block keeps growing with its content.</div>Notes
min-height: 100dvh on the page wrapper together with flexbox pushes the footer to the bottom of the screen when there is little content. dvh takes the changing mobile browser toolbar into account, while vh does not.
See also
- max-height — The maximum height: the element grows with its content only up to this limit.
- height — The height of an element.
- flex — A shorthand for how a flex item grows, shrinks and what size it starts from.
Related recipes
In the tutorial
- The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.