How to Make a Div Fill the Browser Height in CSS

By the end of this page, you will understand why height: 100% often does not work as expected in CSS, how browser height is calculated, and the most common ways to make an element fill the viewport using html, body, percentage heights, and viewport units like 100vh.

In CSS, an element's height usually depends on its content unless you explicitly set it. When you write height: 100%, that 100% must be based on a parent element with a known height. If the parent does not have an explicit height, the browser has nothing concrete to measure against, so the child cannot reliably stretch to the full screen.

This is why height: 100% and min-height: 100% often seem to "not work."

Why this matters

In real web layouts, developers often want:

• sidebars that stretch the full screen height
• full-page sections
• app layouts with a header and content area
• panels with colored backgrounds that should not stop at the last line of text

To build these correctly, you need to understand what height is being measured against.

The main solutions

1. Use viewport height

The simplest modern approach is:

.right {
  min-height: 100vh;
}

100vh means 100% of the viewport height. The viewport is the visible browser window.

2. Give parent elements a height

If you want to use percentage heights, you usually need:

html, body {
  height: 100%;
}

Then child elements can use height: 100% if their parent chain also has defined heights.

3. Use layout systems like Flexbox

In two-column layouts, Flexbox is often the cleanest solution because both columns naturally stretch to the same height within a full-height container.

Important distinction: height vs min-height

• height: 100vh forces an element to be exactly the viewport height.
• min-height: 100vh makes it at least the viewport height, but allows it to grow taller if content needs more space.

For most page sections, min-height: 100vh is safer.

Think of CSS height like measuring a child against a parent wall.

• height: 100% means: "Be as tall as my parent."
• But if the parent says: "I don't know my own height yet," the child cannot calculate 100%.
• height: 100vh means: "Ignore the parent. Be as tall as the visible browser window."

So:

• % height depends on parent height
• vh depends on the browser window

A simple analogy:

• % is like saying, "Make this shelf 100% as tall as the cupboard."
• vh is like saying, "Make this shelf as tall as the room window."

Basic modern solution

.right {
  background: #ddd;
  min-height: 100vh;
}

This makes the right column at least as tall as the browser window.

Example with two columns

<div class="layout">
  <div class="left">Left column</div>
  <div class="right">Right column</div>
</div>

body {
  margin: 0;
}

.layout {
  display: flex;
}

.left {
  width: 200px;
  background: #f4f4f4;
}

.right {
  flex: 1;
  background: #ddd;
  min-height: 100vh;
}

What this does

• display: flex places the columns side by side.
• .left gets a fixed width.
• .right takes the remaining space.
• min-height: 100vh ensures the right column fills at least the full browser height.

Percentage height example

<div class="wrapper">
  <div class="right">Right column</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 100%;
}

.right {
  height: 100%;
  background: #ddd;
}

Why this works

Here, each element in the chain has a defined height:

• html = 100%
• body = 100%
• .wrapper = 100%
• .right = 100%

Without that chain, percentage height often fails.

Consider this example:

<div class="right">Hello</div>

body {
  margin: 0;
}

.right {
  background: #ddd;
  min-height: 100vh;
}

What happens step by step

1. The browser loads the page

The div contains the text Hello.

2. The browser calculates the element's normal content height

Without any height rule, the div would only be tall enough to contain the text.

3. min-height: 100vh is applied

The browser checks the viewport height.

For example:

• if the browser window is 900px tall
• then 100vh becomes 900px

4. The browser compares content height vs minimum height

If the text only needs 30px, the browser uses 900px because that is the minimum.

5. The background fills the full visible height

The gray background now stretches to the bottom of the browser window.

6. If more content is added later

If the content grows taller than the viewport, the div becomes taller than 100vh because min-height allows expansion.

That is why min-height: 100vh is usually better than height: 100vh for content sections.

This technique is used in many common layouts:

Sidebar layouts

A dashboard may have:

• a left navigation panel
• a right content area with a full-height background

Landing page sections

A hero section often fills the entire first screen:

.hero {
  min-height: 100vh;
}

Admin panels

Apps like analytics dashboards often need a full-height content region so the UI feels like a full application rather than a short page.

Split-screen forms

A login page might have:

• branding on the left
• a form on the right
• both sides stretching to the viewport height

Loading and empty states

If a panel has little content, full-height styling prevents the page from looking cut off.

In real projects, developers usually combine full-height elements with modern layout tools.

Common pattern: full-page app shell

html, body {
  margin: 0;
}

.app {
  display: flex;
  min-height: 100vh;
}

This creates a container that fills the screen, and the child columns stretch naturally.

Common pattern: use min-height instead of height

Developers often prefer:

min-height: 100vh;

over:

height: 100vh;

because real content may grow.

Common pattern: guard against default spacing

Many layouts fail because the browser adds a default body margin. Developers often reset it:

body {
  margin: 0;
}

Common pattern: combine with Flexbox

.layout {
  display: flex;
  min-height: 100vh;
}

This makes both columns stretch to the container height automatically.

Common pattern: nested layout containers

In larger codebases, a root container defines height once, and inner components rely on that instead of repeating height logic everywhere.

1. Using height: 100% without giving parents a height

Broken example:

.right {
  height: 100%;
  background: #ddd;
}

Why it fails:

• 100% of what?
• If the parent has no explicit height, the browser cannot resolve it.

Fix:

html, body {
  height: 100%;
}

or use:

min-height: 100vh;

2. Using height: 100vh when content may overflow

.right {
  height: 100vh;
}

Problem:

• if content becomes taller than the screen, layout issues or overflow may appear

Safer option:

.right {
  min-height: 100vh;
}

3. Forgetting the body's default margin

Browsers usually apply a default margin to body, which can leave unwanted white space.

Fix:

body {
  margin: 0;
}

4. Expecting background color to stretch beyond the element

The background only fills the element itself. If the element's height is only as tall as its content, the background ends there too.

5. Overcomplicating a simple viewport-height problem

Sometimes beginners try JavaScript for something CSS already handles well with 100vh or Flexbox.

Quick rule of thumb

• Use min-height: 100vh for most full-screen sections.
• Use % heights only when parent heights are explicitly defined.
• Use Flexbox for multi-column layouts.

Quick fixes

Make an element fill the browser height

.element {
  min-height: 100vh;
}

Use percentage height correctly

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 100%;
}

.child {
  height: 100%;
}

Key rules

• height: 100% needs a parent with explicit height
• 100vh means 100% of the viewport height
• min-height is usually safer than height
• backgrounds only fill the element's actual height
• reset body { margin: 0; } when building full-screen layouts

Recommended default for this problem

body {
  margin: 0;
}

.right {
  background: #ddd;
  min-height: 100vh;
}

Good layout pattern

.layout {
  display: flex;
  min-height: 100vh;
}

Watch out for

• undefined parent heights
• content overflow with fixed height
• body default margins

Why does height: 100% not work on my div?

Because percentage height only works when the parent element has an explicit height.

Should I use height: 100vh or min-height: 100vh?

Usually min-height: 100vh is better because it fills the screen but still allows the element to grow if content is taller.

What does vh mean in CSS?

vh stands for viewport height. 100vh means the full height of the visible browser window.

Do I need to set html and body to height: 100%?

Only if you are using percentage-based heights like height: 100%. It is not required for 100vh.

Why does my full-height layout still show a small gap around the page?

That is often caused by the browser's default body margin. Set body { margin: 0; }.

Is Flexbox a good choice for two-column full-height layouts?

Yes. Flexbox is one of the most common and cleanest ways to build side-by-side columns that stretch together.

Can the element become taller than the screen?

Yes, if you use min-height: 100vh. That is usually desirable when content grows.

• CSS height and width — Basic sizing rules help explain how elements calculate dimensions.
• Percentage units in CSS — Important because % sizes depend on parent dimensions.
• Viewport units (vh, vw) — Directly related to full-screen sizing.
• Flexbox — Commonly used for full-height two-column layouts.
• CSS box model — Helps explain how margins and sizing affect visible layout.
• min-height vs height — Important for choosing flexible versus fixed sizing.
• Document flow — Helps explain why elements normally grow only as tall as their content.