The CSS min-height property

Q: What is the difference between height and min-height?

height fixes the size, so taller content overflows. min-height sets a floor but lets the element grow when the content needs more room.

Q: How do I make a full-screen section?

Use min-height: 100dvh. The dvh unit tracks the dynamic viewport, so the section is not cropped by the mobile address bar the way 100vh can be.

Q: Does min-height override height?

Yes. If min-height is larger than height, the minimum wins and the element grows to meet it.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS min-height property sets a floor on an element's height — it can grow taller if the content needs it, but never shrinks below the value. The most common use is full-screen sections with min-height: 100dvh, and it is usually a safer choice than a fixed height, which clips overflowing content.

Overview

min-height guarantees an element is at least a certain height while letting it grow taller when its content demands. That "grow if needed" behavior is what makes it so much safer than a fixed height: a fixed height clips or overflows when the content is too big, whereas a minimum simply stretches to fit.

The headline use is full-height sections — a hero or a landing panel that should fill the screen but expand if its content runs long. min-height: 100dvh does exactly that, with dvh (dynamic viewport height) accounting for the mobile address bar that 100vh famously ignores, so the section is not cropped on phones.

It also keeps interfaces from collapsing when they are empty: a card or a drop zone with min-height holds its shape before any content arrives. As with the other minimum and maximum properties, it cooperates with the rest — min-height always wins over a smaller height.

Syntax

/* a section at least one screen tall */
.hero {
  min-height: 100dvh;
}

Values

The min-height property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`auto`	No explicit minimum; height grows with content. The default.
`length`	A fixed floor such as 100px or 4rem.
`percentage`	A share of the parent's height (the parent needs a definite height).
`100dvh`	Viewport units for full-screen sections; dvh tracks mobile browser bars.

Example

Live example

<style>
  .panel {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 10px;
    font: 600 15px system-ui, sans-serif;
    text-align: center;
    padding: 16px;
  }
</style>
<div class="panel">At least 130px tall, and flexbox centers this line — but I would grow if there were more content.</div>

Best practices

Prefer min-height over a fixed height whenever content might grow — it stretches instead of clipping.
Use min-height: 100dvh for full-screen sections so the mobile browser chrome does not crop the bottom.
Give empty containers (cards, drop zones, placeholders) a min-height so they hold their shape before content loads.
Combine it with Flexbox to vertically center content inside a section that can still grow.

Frequently asked questions

What is the difference between height and min-height?

height fixes the size, so taller content overflows. min-height sets a floor but lets the element grow when the content needs more room.

How do I make a full-screen section?

Use min-height: 100dvh. The dvh unit tracks the dynamic viewport, so the section is not cropped by the mobile address bar the way 100vh can be.

Why use min-height instead of height?

Because a fixed height clips or overflows when content grows. A minimum guarantees a size while still expanding to fit, which avoids a whole class of overflow bugs.

Does min-height override height?

Yes. If min-height is larger than height, the minimum wins and the element grows to meet it.

max-width object-fit

References