Question

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

csshtmlheight

Question

I want the body element to take up the full height of the browser window using CSS. Is that possible?

I tried this:

body {
  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 only a small amount of content, I see an unwanted white area 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 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.

Concept

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:

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

Option 1: Percentage height

Mental Model

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.

Take Quiz

Syntax and Examples

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.

Step by Step Execution

Consider this CSS:

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

body {
  background: lightgreen;
}

Here is what happens step by step:

The browser creates the page structure: html contains body.
html gets height: 100%. For the root element, this can match the viewport height.
body gets height: 100%, which now has a valid reference: the height of html.
margin: 0 removes the default spacing around the body.
background: lightgreen paints the body's background across its full area.
If the page has very little content, the body still fills the screen height.
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%;
  : lightgreen;
}

Real World Use Cases

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.

Take Quiz

Real Codebase Usage

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>

, ,  {
  : ;
}

Common Mistakes

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

Comparisons

Approach	What it means	Good for	Limitation
`body { height: 100%; }`	Body tries to match parent height	Rarely enough by itself	Fails if parent height is not defined
`html, body { height: 100%; }`	Both root elements get full height	Traditional full-page layouts	Percentage height depends on document structure
`body { height: 100vh; }`	Body is exactly viewport height	Full-screen sections	Can be too rigid if content grows
`body { min-height: 100vh; }`	Body is at least viewport height	Most page background cases	Needs care on some mobile browser viewport behaviors

`height` vs

Cheat Sheet

/* 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

FAQ

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.

Related Concepts

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.

Take Quiz

Mini Project

Description

Build a simple full-height welcome page with a background color and centered content. This project demonstrates how to make a page fill the browser height correctly, even when there is very little content.

Goal

Create a page whose background always fills the browser window and whose content stays centered.

Requirements

Make the page background fill at least the full browser height.
Remove any default spacing around the page.
Center a heading and short message both horizontally and vertically.
Keep the layout working even if more content is added later.

Take Quiz

Keep learning

Property	Behavior
`height`	Sets an exact height
`min-height`	Sets the minimum allowed height

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

Question

Short Answer

Concept

Why this matters

The usual solutions

Option 1: Percentage height

Mental Model

Syntax and Examples

Core syntax

Using percentage height

Using viewport height

Beginner-friendly example

Step by Step Execution

Real World Use Cases

Full-page backgrounds

Login and signup screens

Hero sections

Sticky footer layouts

App shells

Real Codebase Usage

Pattern: reset default margin

Pattern: prefer min-height for pages

Pattern: full-height app container

Common Mistakes

1. Setting height: 100% only on body

2. Forgetting the default margin

Comparisons

height vs

Cheat Sheet

Quick rules

Best default for this problem

If using an app root

FAQ

Why does height: 100% on body not work?

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

Why is there still space around my page background?

Does 100vh always mean the visible browser height?

Can I set the background on html instead of body?

Related Concepts

Mini Project

Description

Goal

Requirements

Related questions

Angular ngClass Conditional Class Binding Explained

CSS :not() Selector for Elements Without a Class or Attribute

CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text

Option 2: Viewport height

Why min-height is often better than height

What this does

Example with html, body

Pattern: guard against short content

Pattern: combine with flexbox

3. Using height: 100vh when content can grow

4. Applying the background to the wrong element

5. Confusing height with min-height

Common edge case

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

Pattern: prefer `min-height` for pages

1. Setting `height: 100%` only on `body`

`height` vs

Why does `height: 100%` on `body` not work?

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

Does `100vh` always mean the visible browser height?

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

Why `min-height` is often better than `height`

Example with `html, body`

3. Using `height: 100vh` when content can grow

5. Confusing `height` with `min-height`