Question

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

htmlcssheight

Question

I want the body to fill 100% of the browser height using CSS. Is that possible?

I tried setting height: 100%, but it does not work as expected.

My goal is to apply a background color that fills the entire browser window. When the page has very little content, I see an unwanted white bar at the bottom of the page.

Short Answer

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.

Concept

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.

Mental Model

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.

Take Quiz

Syntax and Examples

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

Step by Step Execution

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:

The browser loads the html element.
html gets height: 100%, which refers to the viewport height.
The browser loads the body element inside html.
body gets , which now means 100% of the height.

Real World Use Cases

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

Take Quiz

Real Codebase Usage

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:

 {
  : ;
}

Common Mistakes

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

Comparisons

Approach	What it means	Best use	Limitation
`body { height: 100%; }`	Body matches parent height	Rarely enough on its own	Fails if parent height is not set
`html, body { height: 100%; }`	Both root and body fill viewport height chain	Traditional full-height page setup	Slightly less flexible than `min-height` for growing content
`body { height: 100vh; }`	Body is exactly viewport height	Full-screen fixed sections	Can be too restrictive if content grows
`body { min-height: 100vh; }`	Body is at least viewport height	Most page background cases	May need mobile-specific handling in some layouts

Cheat Sheet

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

FAQ

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, is often safer.

Related Concepts

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.

Take Quiz

Mini Project

Description

Build a simple full-height welcome page that always fills the browser window, even when there is only a small amount of content. This demonstrates how to use full-page height correctly for backgrounds and basic layout.

Goal

Create a page with a full-window background color and centered content that still grows correctly if more content is added.

Requirements

Make the page background fill at least the full browser height.
Remove default page spacing that causes visible white edges.
Center a content box horizontally and vertically.
Allow the page to grow if additional content is added.

Take Quiz

Keep learning

Property	Behavior
`height`	Sets a fixed computed height
`min-height`	Sets the minimum height, but allows expansion

Unit	Based on
`%`	Parent element's size
`vh`	Viewport height

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

Question

Short Answer

Concept

Mental Model

Syntax and Examples

Option 1: Set both html and body to 100%

Option 2: Use viewport height

Example HTML and CSS

Step by Step Execution

Real World Use Cases

Real Codebase Usage

1. Global page background

2. Root app container filling the screen

3. Safe flexible layout with min-height

4. Guarding against default browser spacing

Common Mistakes

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

2. Forgetting default body margin

Comparisons

Cheat Sheet

Quick rules

Common fixes

FAQ

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

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

Why is there still white space around my page?

What does 100vh mean in CSS?

Can I set the background on html instead of body?

Is height: 100vh bad?

Related Concepts

Mini Project

Description

Goal

Requirements

Related questions

Allow Only Numeric Input (0-9) in HTML Input Using jQuery

CSS :not() Selector for Excluding a Class or Attribute

Can HTML Checkboxes Be Readonly? Understanding readonly vs disabled in HTML Forms

Why margin: 0 matters

5. Full-page sections

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

4. Confusing height with min-height

5. Applying the background to the wrong element

height vs min-height

% vs vh

Best default for many pages

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

Option 1: Set both `html` and `body` to 100%

3. Safe flexible layout with `min-height`

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

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

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

What does `100vh` mean in CSS?

Can I set the background on `html` instead of `body`?

Is `height: 100vh` bad?

Why `margin: 0` matters

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

4. Confusing `height` with `min-height`

`height` vs `min-height`

`%` vs `vh`

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