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,  {
  : ;
}

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;
  : ;
}

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

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

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 {
  : ;
}

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: ;
}

 {
  : ;
  : ;
}

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.

• 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.