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 percentage heights depend on parent elements, and how to make a page background fill the full browser height using html, body, min-height, and viewport units like 100vh.

In CSS, height: 100% does not mean “fill the browser window” unless the parent element also has a defined height.

That is the key reason this does not work:

body {
  height: 100%;
}

The body element is inside the html element. If html does not have a defined height, then body has no clear 100% to measure against.

Why this matters

When you want a full-page background color, image, or layout, you often need the page to be at least as tall as the viewport.

Common use cases include:

• full-page backgrounds
• login screens
• landing pages
• sticky footer layouts
• centered content screens

The usual solutions

There are two common ways to make the page fill the browser height:

1. Set both html and body to height: 100%
2. Use viewport units such as min-height: 100vh

Option 1: Percentage height

html, body {
  height: 100%;
}

This works because body can now calculate 100% based on the html element.

Option 2: Viewport height

body {
  min-height: 100vh;
}

This means the body will be at least as tall as the visible browser window.

For most page background cases, min-height: 100vh is often the simplest and most practical choice.

Why min-height is often better than height

If you use:

body {
  height: 100vh;
}

then the body is exactly the height of the viewport. If the content becomes taller than the screen, layout issues can happen.

With:

body {
  min-height: 100vh;
}

the body is:

• at least the height of the screen
• allowed to grow if content is taller

That makes it safer for real pages.

Think of percentage height like saying:

“Make this box as tall as its parent.”

If the parent does not have a known height, the browser cannot calculate that percentage.

So when you write:

body {
  height: 100%;
}

it is like telling body:

“Be 100% as tall as html.”

But if html never said how tall it is, body has nothing to measure.

By contrast, 100vh means:

“Be as tall as the browser window.”

That does not depend on the parent element, which is why it is often easier to use.

Core syntax

Using percentage height

html, body {
  height: 100%;
}

Using viewport height

body {
  min-height: 100vh;
}

Beginner-friendly example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      background-color: steelblue;
      color: white;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello</h1>
  <p>This background fills the full browser height.</p>
</body>
</html>

What this does

• margin: 0; removes the browser's default body margin, which can otherwise leave space around the page
• min-height: 100vh; makes the body at least as tall as the viewport
• background-color: steelblue; fills the whole visible page area

Example with html, body

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

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

This also works because both elements have a defined height.

Consider this CSS:

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

body {
  background: lightgreen;
}

Here is what happens step by step:

1. The browser creates the page structure: html contains body.
2. html gets height: 100%. For the root element, this can match the viewport height.
3. body gets height: 100%, which now has a valid reference: the height of html.
4. margin: 0 removes the default spacing around the body.
5. background: lightgreen paints the body's background across its full area.
6. If the page has very little content, the body still fills the screen height.
7. If the content grows, the page can still expand depending on the layout rules being used.

Now compare that with this broken version:

body {
  height: 100%;
  background: lightgreen;
}

Step by step:

1. body asks to be 100% tall.
2. The browser checks the parent element: html.
3. html does not have an explicit height.
4. The browser cannot reliably compute that 100% height.
5. The background only covers the body's content area, not necessarily the full viewport.

This concept appears in many common layouts.

Full-page backgrounds

A landing page might need a background color or image that always covers the full screen, even when there is very little text.

Login and signup screens

Authentication pages often use centered forms on a full-height background.

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Hero sections

Some sites make the first visible section fill the screen.

.hero {
  min-height: 100vh;
}

Sticky footer layouts

If a page has little content, developers often want the footer to stay at the bottom of the screen instead of floating halfway up the page.

App shells

Single-page applications often need the root container to fill the viewport so sidebars, headers, and content areas can be laid out correctly.

In real projects, developers usually combine full-height techniques with a few other common patterns.

Pattern: reset default margin

Browsers add default margin to body, usually causing visible gaps.

body {
  margin: 0;
}

Pattern: prefer min-height for pages

For page-level layout, min-height is often safer than fixed height.

body {
  min-height: 100vh;
}

This avoids clipping or overflow issues when content becomes taller.

Pattern: full-height app container

In many codebases, the body contains an app root element.

<body>
  <div id="app"></div>
</body>

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

This is common in React, Vue, and other frontend apps.

Pattern: guard against short content

If a page sometimes has lots of content and sometimes very little, min-height: 100vh keeps the visual background stable.

Pattern: combine with flexbox

Developers often use full-height body plus flexbox to place content vertically.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

That helps create layouts with headers, main content, and footers.

1. Setting height: 100% only on body

Broken:

body {
  height: 100%;
}

Why it fails:

• body needs its parent to have a defined height
• html usually does not have one unless you set it

Fix:

html, body {
  height: 100%;
}

2. Forgetting the default margin

Broken:

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

Problem:

• the browser's default margin can leave visible space around the page

Fix:

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

3. Using height: 100vh when content can grow

Problematic:

body {
  height: 100vh;
}

Issue:

• the body is locked to the viewport height
• taller content may create awkward overflow behavior

Safer:

body {
  min-height: 100vh;
}

4. Applying the background to the wrong element

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

.container {
  background: pink;
}

If .container does not fill the viewport, the background will not either.

5. Confusing height with min-height

• height means exact height
• min-height means minimum height

For most page backgrounds, min-height is more flexible.

height vs min-height

If your page may contain extra content later, min-height is usually the better choice.

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

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

Quick rules

• height: 100% depends on the parent having a defined height
• body alone usually cannot use height: 100% successfully
• set html, body { height: 100%; } if using percentages
• use min-height: 100vh for a page that should fill the screen but still grow
• remove default body margin if you want edge-to-edge background

Best default for this problem

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

If using an app root

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

Common edge case

If the page background still looks wrong, check:

• default margins
• whether the background is on body or another element
• whether a parent container is limiting height

Why does height: 100% on body not work?

Because percentage height needs a parent with a defined height. body depends on html, and html usually does not have height set by default.

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

For most full-page background cases, min-height: 100vh is the simpler and safer choice.

Why is there still space around my page background?

You probably need to remove the default body margin:

body {
  margin: 0;
}

Does 100vh always mean the visible browser height?

It usually refers to the viewport height, but mobile browsers can behave differently as browser UI appears or disappears.

Can I set the background on html instead of body?

Yes, but in many cases setting it on body is enough. If needed, you can style both.

What is the safest CSS for a full-height page background?

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

• CSS height — Directly related because this question is about how element height is calculated.
• CSS min-height — Important because it is often the better tool for full-page layouts.
• Viewport units (vh, vw) — Useful for sizing elements relative to the browser window.
• CSS box model — Helps explain why margins can create visible gaps around the page.
• Flexbox — Commonly combined with full-height layouts to center or arrange content.
• Sticky footer layout — A practical layout pattern that often depends on full-height page setup.
• HTML root element (html) — Important because percentage height on body depends on it.