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 in CSS layouts, how percentage heights depend on parent elements, and how to use viewport units like 100vh to make an element fill the browser window height reliably.

In CSS, making an element fill the full browser height sounds simple, but there is an important rule behind it: percentage heights only work if the parent has an explicit height.

For example, if you write:

.right {
  height: 100%;
}

that 100% does not mean "100% of the browser window" by itself. It means "100% of the height of my parent element." If the parent does not have a fixed or defined height, the browser has nothing concrete to measure against.

That is why height: 100% and min-height: 100% often appear to do nothing.

A more direct solution is to use viewport units:

min-height: 100vh;

Here, vh stands for viewport height.

• 100vh = 100% of the visible browser window height
• 50vh = half the browser window height

This is useful when you want a section, column, sidebar, hero area, or full-page panel to fill the screen.

This concept matters because full-height layouts are common in:

• dashboard sidebars
• landing pages
• two-column app layouts
• login screens
• admin panels

Understanding the difference between % heights and viewport units helps you avoid confusing layout bugs.

Think of percentage height like saying:

"Make this box as tall as its container."

That only works if the container already knows its own height.

If the container says:

"I don't know my height yet; I'm just as tall as my content."

then the child cannot calculate 100%.

Viewport height is different. It is like saying:

"Ignore the parent. Match the browser window itself."

So:

• height: 100% = match the parent's height
• height: 100vh = match the screen height

That is why 100vh is usually the simpler answer when you want full browser height.

Core syntax

Option 1: Use viewport height

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

This makes the element at least as tall as the browser window.

Option 2: Use percentage height with parent heights defined

html, body {
  height: 100%;
}

.container {
  height: 100%;
}

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

This works only if every relevant parent element also has a defined height.

Beginner-friendly example

<div class="layout">
  <div class="left">Menu</div>
  <div class="right">Content area</div>
</div>

body {
  margin: 0;
}

.layout {
  display: flex;
}

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

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

Why this works

• display: flex places the columns side by side.
• .right gets the gray background.
• min-height: 100vh makes the right column at least as tall as the browser window.
• If the content becomes taller than the screen, the element can still grow.

Consider this example:

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

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

Here is what happens step by step:

1. The browser creates a <div> with the text Hello.
2. The background: lightgray; rule paints the element's background.
3. min-height: 100vh; tells the browser:
   • make this element at least as tall as the viewport
   • if content becomes taller, allow it to expand
4. If the browser window is 900 pixels tall, 100vh becomes 900 pixels.
5. The gray background now covers the full visible height.
6. If you add more content later and the content needs 1200 pixels, the div grows beyond 900 pixels because min-height sets a minimum, not a maximum.

Now compare with this:

.right {
  background: lightgray;
  height: 100%;
}

If the parent element has no defined height, the browser cannot calculate what 100% means, so the result may only be the content height.

Common uses for full-height elements

Sidebars in dashboards

Admin panels often have a navigation sidebar that should stretch from the top to the bottom of the screen.

Split-screen layouts

A left navigation panel and right content panel often need full browser height.

Hero sections

Landing pages commonly use a section that fills the first screen.

Login and signup pages

Many authentication screens center a form inside a full-height container.

Mobile app-style web layouts

Web apps often need panels that occupy the visible screen height.

Example

.sidebar {
  width: 240px;
  min-height: 100vh;
  background: #2d3748;
}

This ensures the sidebar remains full height even when it has only a small amount of content.

In real projects, developers usually combine full-height elements with modern layout tools such as Flexbox or Grid.

Common patterns

Use min-height instead of height

.main-panel {
  min-height: 100vh;
}

This is often better because content can still grow naturally.

Use Flexbox for two-column layouts

.layout {
  display: flex;
}

.sidebar {
  width: 250px;
}

.content {
  flex: 1;
  min-height: 100vh;
}

Set root heights when using percentage layouts

html, body {
  height: 100%;
}

This is common in older codebases or layouts built around percentage heights.

Guard against default spacing

Browsers add default body margin, which can make a full-height layout look slightly wrong.

body {
  margin: 0;
}

Use layout containers

In larger projects, a page wrapper often controls height:

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

This keeps the page structure predictable.

1. Using height: 100% without defining parent heights

Broken example:

.right {
  height: 100%;
}

Why it fails:

• 100% depends on the parent's height
• if the parent height is auto, the browser cannot resolve it

Fix:

html, body {
  height: 100%;
}

or use:

.right {
  min-height: 100vh;
}

2. Using height when min-height is better

Broken approach:

.right {
  height: 100vh;
}

Possible issue:

• if content becomes taller than the screen, it may overflow awkwardly

Better:

.right {
  min-height: 100vh;
}

3. Forgetting default body margin

Broken-looking layout:

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

If the page still shows a white edge, the default body margin may be the cause.

Fix:

body {
  margin: 0;
}

4. Expecting background color to fill beyond the element

The background only paints the actual box. If the element is only as tall as its content, the color ends there.

Fix the element's height rules rather than trying to force the background alone.

5. Applying the height to the wrong element

Sometimes the layout wrapper should get the full height, not only one child.

Example:

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

This can be cleaner if both columns should stretch equally.

height vs min-height

In most content-based layouts, min-height: 100vh is the safer choice.

/* Most common full-browser-height solution */
.element {
  min-height: 100vh;
}

/* Percentage height requires parent heights */
html, body {
  height: 100%;
}

.parent {
  height: 100%;
}

.child {
  height: 100%;
}

Quick rules

• 100% means 100% of the parent height
• % heights need explicit parent heights
• 100vh means 100% of the browser viewport height
• min-height: 100vh is usually better than height: 100vh
• body { margin: 0; } often helps full-screen layouts look correct

Good default for a full-height column

body {
  margin: 0;
}

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

For two-column layouts

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

This often makes both columns stretch together.

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

Because it depends on the parent's height. If the parent does not have an explicit height, the browser cannot calculate 100%.

What does 100vh mean in CSS?

It means 100% of the viewport height, which is the visible browser window height.

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

Usually min-height: 100vh is better because the element can still grow if its content becomes taller than the screen.

Do I need to set html, body { height: 100%; }?

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

Why is there still space around my full-height div?

The browser may be applying a default margin to the body. Try body { margin: 0; }.

Can Flexbox help with full-height columns?

Yes. Flexbox is a common way to create side-by-side columns, and it works well with min-height: 100vh.

Does background color automatically fill the screen?

No. The background only fills the element's actual size. You must make the element itself tall enough.

• CSS height — The basic property behind element sizing.
• min-height — Important when you want a minimum size but still allow content growth.
• Viewport units — Includes vh and vw, which size elements relative to the browser window.
• Flexbox — Commonly used to build full-height two-column layouts.
• CSS Grid — Another layout system that can create full-page and full-height designs.
• Box model — Helps explain how margins and sizing affect visible layout.
• Body margin reset — Often needed to remove default spacing around full-screen layouts.