How to Make the Body Fill the Full Browser Height in CSS

By the end of this page, you will understand why height: 100% on body often does not work by itself, how browser height is calculated, and the correct CSS patterns for making a page fill the full viewport height. You will also learn when to use height: 100%, when to use min-height: 100vh, and how this is commonly handled in real projects.

In CSS, percentage heights only work when the parent element has a defined height.

That is the main reason this often fails:

body {
  height: 100%;
}

The body element is inside the html element. If html does not have an explicit height, then body has no fixed parent height to measure 100% from.

A common fix is:

html, body {
  height: 100%;
}

This tells both the root element and the body to stretch to the full browser height.

Another modern and often simpler solution is:

body {
  min-height: 100vh;
}

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

Why this matters:

• It prevents short pages from showing empty space below your background.
• It helps with full-page layouts such as landing pages, login screens, dashboards, and hero sections.
• It gives you predictable layout behavior when content is small.

A useful distinction:

• height: 100% tries to make the element exactly as tall as its parent.
• min-height: 100vh makes the element at least as tall as the browser window, but still allows it to grow if content becomes taller.

For most page background cases, min-height: 100vh is the safer option.

Think of element height like a child trying to match a parent's height.

If a child says, "I want to be 100% as tall as my parent," that only works if the parent already knows its own height.

• body { height: 100%; } is like saying: "Make me as tall as my parent."
• But if html has no defined height, the browser responds: "100% of what?"

Now compare that with viewport height:

• 100vh is like saying: "Make me as tall as the visible browser window."
• This does not depend on the parent element knowing its height.

So:

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

The two most common solutions are below.

Option 1: Set both html and body to 100%

html, body {
  height: 100%;
}

body {
  background-color: lightblue;
  margin: 0;
}

This works because body can now calculate 100% from html, and html is also explicitly set.

Option 2: Use viewport height

body {
  min-height: 100vh;
  background-color: lightblue;
  margin: 0;
}

This is often the easiest and most flexible solution.

• min-height: 100vh ensures the body is at least as tall as the window.
• If content grows taller, the page still expands normally.

Example HTML and CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      min-height: 100vh;
      margin: 0;
      background: lightgreen;
    }
  </style>
</head>
<body>
  <h1>Hello</h1>
  <p>This page background fills the full browser height.</p>
</body>
</html>

Why margin: 0 matters

Browsers add default margin to body. That margin can create visible whitespace around the page.

body {
  margin: 0;
}

If you are trying to remove the white bar around the page, this line is often necessary.

Consider this example:

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      background-color: peachpuff;
    }
  </style>
</head>
<body>
  <p>Short page content</p>
</body>
</html>

Here is what happens step by step:

1. The browser loads the html element.
2. html gets height: 100%, which refers to the viewport height.
3. The browser loads the body element inside html.
4. body gets height: 100%, which now means 100% of the html height.
5. body also gets background-color: peachpuff.
6. Because margin: 0 is set, no default body spacing creates extra white edges.
7. Even if the content is very short, the body still fills the full browser height.

Now compare that with this broken version:

body {
  height: 100%;
  background-color: peachpuff;
}

Why it fails:

1. body asks to be 100% tall.
2. Its parent html has no explicit height.
3. The browser cannot resolve that percentage in the way you expect.
4. The body only grows based on its content.
5. If content is short, the background may not visually fill the full page.

Full-browser height layouts appear in many practical situations:

• Landing pages: a full-screen hero section with a background color or image.
• Login pages: center a form vertically on a full-height page.
• Dashboard shells: ensure the app background fills the screen even with little content.
• Error pages: make a 404 or maintenance page fill the viewport cleanly.
• Mobile web apps: keep the page background consistent across short screens.
• Admin panels: make sidebars and content regions stretch to the full visible area.

Example for a centered login screen:

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f6f8;
}

In real projects, developers usually choose one of these patterns:

1. Global page background

body {
  min-height: 100vh;
  margin: 0;
  background: #fafafa;
}

This is common for simple websites and single-page apps.

2. Root app container filling the screen

In many modern apps, the body is kept simple and a root container gets the full height.

html, body, #app {
  height: 100%;
}

This is useful when frameworks render the app inside a root element.

3. Safe flexible layout with min-height

.page {
  min-height: 100vh;
  background: white;
}

This allows the layout to fill short screens but still grow for long pages.

4. Guarding against default browser spacing

A very common reset is:

body {
  margin: 0;
}

Without this, developers may think height is wrong when the real issue is default margin.

5. Full-page sections

.hero {
  min-height: 100vh;
  background: linear-gradient(to bottom, #4f46e5, #7c3aed);
}

This is frequently used for banners, splash screens, and onboarding pages.

1. Setting only body { height: 100%; }

Broken example:

body {
  height: 100%;
}

Why it is a problem:

• body needs a parent with defined height.
• If html has no height, the percentage has no reliable reference.

Fix:

html, body {
  height: 100%;
}

2. Forgetting default body margin

Broken example:

body {
  min-height: 100vh;
  background: lightblue;
}

Why it is a problem:

• Browsers add default margin to body.
• This can make it look like there is extra white space.

Fix:

body {
  min-height: 100vh;
  margin: 0;
  background: lightblue;
}

3. Using height: 100vh when content may become taller

Example:

body {
  height: 100vh;
}

Why it can be a problem:

• It fixes the height to the viewport.
• Large content may overflow awkwardly.

Safer option:

body {
  min-height: 100vh;
}

4. Confusing height with min-height

• height sets an exact height.
• min-height sets a minimum height.

For pages, min-height is often better because pages usually need to grow.

5. Applying the background to the wrong element

Sometimes beginners style a small container instead of the full page.

Broken example:

.container {
  background: pink;
}

If .container does not stretch to full height, the background will not either.

Fix:

• Put the background on body, or
• Make the container explicitly fill the height.

height vs min-height

% vs vh

For a page background that should always fill the browser window, min-height: 100vh is usually the most practical choice.

/* Traditional approach */
html, body {
  height: 100%;
}

body {
  margin: 0;
  background: lightblue;
}

/* Modern common approach */
body {
  min-height: 100vh;
  margin: 0;
  background: lightblue;
}

Quick rules

• height: 100% needs a parent with explicit height.
• For body, that usually means also setting html { height: 100%; }.
• min-height: 100vh is often better for full-page backgrounds.
• Use margin: 0 to remove the browser's default body spacing.
• Prefer min-height over height when content may grow.

Common fixes

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

body {
  min-height: 100vh;
  margin: 0;
}

Best default for many pages

body {
  min-height: 100vh;
  margin: 0;
  background-color: #eee;
}

Why does body { height: 100%; } not work by itself?

Because percentage height depends on the parent element having a defined height. If html does not have a height, body cannot reliably use 100%.

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

For full-page backgrounds, min-height: 100vh is usually the better choice because it fills the screen and still allows the page to grow.

Why is there still white space around my page?

The browser adds default margin to body. Set margin: 0 to remove it.

What does 100vh mean in CSS?

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

Can I set the background on html instead of body?

Yes, but most page styling is commonly applied to body. Either can work depending on the layout.

Is height: 100vh bad?

Not necessarily. It is useful for exact full-screen sections. But for full pages with variable content, min-height: 100vh is often safer.

Do I need to set both html and body to height: 100% in modern CSS?

Only if you are using percentage-based height. If you use min-height: 100vh, you often do not need to set both.

• CSS height — Understanding how element height is calculated is essential here.
• CSS min-height — This is often the best property for full-page layouts.
• Viewport units (vh, vw) — These units size elements relative to the browser window.
• CSS box model — Default margins can affect the visible page area.
• HTML root element (html) — Percentage heights often depend on the root element.
• CSS background-color — This is the practical styling goal in this problem.
• Flexbox — Often used together with full-height pages for vertical centering.