The CSS height property

Q: How do I set the height of a div?

Use the height property, e.g. .box { height: 200px; }. More often you want min-height, which sets a minimum but lets the box grow with its content.

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

height fixes the size, so taller content overflows. min-height sets a floor but still lets the box grow when the content needs more room — usually the safer choice.

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.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS height property sets how tall an element is. The default, auto, lets it grow to fit its content, which is what you want most of the time. Use a fixed length like 200px when you need a set size, or min-height when you want a floor but still want the box to grow if the content is taller.

Overview

height is the vertical partner to width, but it behaves quite differently in practice. On the web, content flows top to bottom and boxes are happy to grow as tall as they need, so the default of auto is usually the right answer — let the element size itself to its content and you avoid a whole category of overflow bugs.

You can still set a fixed height (200px, 30rem) when a design calls for it, but the moment the content is taller than the box it will spill out unless you also handle overflow. Nine times out of ten what you actually want is min-height: a guaranteed minimum that still lets the box stretch when there is more to show.

Percentage heights have a catch worth remembering: height: 100% only works if the parent has a definite height of its own, otherwise the browser has nothing to take a percentage of and falls back to auto. For full-screen sections, the viewport units are the cleaner tool — 100vh, or 100dvh which accounts for the address bar that slides in and out on mobile.

Syntax

selector {
  height: value;
}

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

Values

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

Value	Description
`auto`	The default — the height grows to fit the content. Almost always what you want.
`length`	A fixed size such as 200px or 30rem.
`percentage`	A share of the parent's height, but only if the parent has a definite height.
`min-content`	The shortest the content can be.
`max-content`	Tall enough for all the content with no scrolling.
`100vh / 100dvh`	Viewport units, not keywords: full screen height. dvh accounts for mobile browser bars.

Example

Live example

<style>
  .panel {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 10px;
    font: 600 16px system-ui, sans-serif;
  }
</style>
<div class="panel">min-height keeps me at least 120px tall, and flexbox centers this line inside.</div>

Best practices

Leave height on auto by default and reach for min-height when you want a floor — fixed heights are the usual cause of clipped or overflowing content.
For full-screen sections use min-height: 100dvh rather than 100vh, so mobile browser chrome does not crop the bottom.
If you set a fixed height, decide what happens when content is too tall — pair it with an overflow value on purpose.
To make equal-height columns, use a flex or grid container instead of fixed heights; the items stretch to match automatically.

Frequently asked questions

How do I set the height of a div?

Use the height property, e.g. .box { height: 200px; }. More often you want min-height, which sets a minimum but lets the box grow with its content.

Why does height: 100% not work?

A percentage height needs the parent to have a definite height. If the parent is auto, there is nothing to take 100% of. Give the parent a height, or use a viewport unit like 100vh.

What is the difference between height and min-height?

height fixes the size, so taller content overflows. min-height sets a floor but still lets the box grow when the content needs more room — usually the safer choice.

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.

grid-template-columns justify-content

References