Question
I have a two-column layout with a left div and a right div.
The right div has a gray background-color, and I want it to extend vertically to match the height of the user's browser window. At the moment, the background color stops at the end of the content inside that div.
I have already tried rules such as:
height: 100%;
min-height: 100%;
How can I make the right div fill the full height of the browser window?
Short Answer
By the end of this page, you will understand why height: 100% often does not work as expected in CSS, how browser height is calculated, and the most common ways to make an element fill the viewport using html, body, percentage heights, and viewport units like 100vh.
Concept
In CSS, an element's height usually depends on its content unless you explicitly set it. When you write height: 100%, that 100% must be based on a parent element with a known height. If the parent does not have an explicit height, the browser has nothing concrete to measure against, so the child cannot reliably stretch to the full screen.
This is why height: 100% and min-height: 100% often seem to "not work."
Why this matters
In real web layouts, developers often want:
- sidebars that stretch the full screen height
- full-page sections
- app layouts with a header and content area
- panels with colored backgrounds that should not stop at the last line of text
To build these correctly, you need to understand what height is being measured against.
The main solutions
1. Use viewport height
The simplest modern approach is:
.right {
min-height: 100vh;
}
100vh means 100% of the viewport height. The viewport is the visible browser window.
2. Give parent elements a height
If you want to use percentage heights, you usually need:
html, {
: ;
}
Mental Model
Think of CSS height like measuring a child against a parent wall.
height: 100%means: "Be as tall as my parent."- But if the parent says: "I don't know my own height yet," the child cannot calculate 100%.
height: 100vhmeans: "Ignore the parent. Be as tall as the visible browser window."
So:
%height depends on parent heightvhdepends on the browser window
A simple analogy:
%is like saying, "Make this shelf 100% as tall as the cupboard."vhis like saying, "Make this shelf as tall as the room window."
Syntax and Examples
Basic modern solution
.right {
background: #ddd;
min-height: 100vh;
}
This makes the right column at least as tall as the browser window.
Example with two columns
<div class="layout">
<div class="left">Left column</div>
<div class="right">Right column</div>
</div>
body {
margin: 0;
}
.layout {
display: flex;
}
.left {
width: 200px;
background: #f4f4f4;
}
.right {
flex: 1;
background: #ddd;
: ;
}
Step by Step Execution
Consider this example:
<div class="right">Hello</div>
body {
margin: 0;
}
.right {
background: #ddd;
min-height: 100vh;
}
What happens step by step
1. The browser loads the page
The div contains the text Hello.
2. The browser calculates the element's normal content height
Without any height rule, the div would only be tall enough to contain the text.
3. min-height: 100vh is applied
The browser checks the viewport height.
For example:
- if the browser window is
900pxtall - then
100vhbecomes900px
Real World Use Cases
This technique is used in many common layouts:
Sidebar layouts
A dashboard may have:
- a left navigation panel
- a right content area with a full-height background
Landing page sections
A hero section often fills the entire first screen:
.hero {
min-height: 100vh;
}
Admin panels
Apps like analytics dashboards often need a full-height content region so the UI feels like a full application rather than a short page.
Split-screen forms
A login page might have:
- branding on the left
- a form on the right
- both sides stretching to the viewport height
Loading and empty states
If a panel has little content, full-height styling prevents the page from looking cut off.
Real Codebase Usage
In real projects, developers usually combine full-height elements with modern layout tools.
Common pattern: full-page app shell
html, body {
margin: 0;
}
.app {
display: flex;
min-height: 100vh;
}
This creates a container that fills the screen, and the child columns stretch naturally.
Common pattern: use min-height instead of height
Developers often prefer:
min-height: 100vh;
over:
height: 100vh;
because real content may grow.
Common pattern: guard against default spacing
Many layouts fail because the browser adds a default body margin. Developers often reset it:
body {
margin: 0;
}
Common pattern: combine with Flexbox
Common Mistakes
1. Using height: 100% without giving parents a height
Broken example:
.right {
height: 100%;
background: #ddd;
}
Why it fails:
- 100% of what?
- If the parent has no explicit height, the browser cannot resolve it.
Fix:
html, body {
height: 100%;
}
or use:
min-height: 100vh;
2. Using height: 100vh when content may overflow
.right {
height: 100vh;
}
Problem:
- if content becomes taller than the screen, layout issues or overflow may appear
Safer option:
.right {
: ;
}
Comparisons
| Approach | How it works | Best for | Main limitation |
|---|---|---|---|
height: 100% | Uses parent height | Nested layouts with explicit parent heights | Fails if parent height is not defined |
min-height: 100% | Minimum based on parent height | Similar to height: 100%, but can grow | Still depends on parent height |
height: 100vh | Uses viewport height | Full-screen sections | Can be too rigid if content grows |
min-height: 100vh | Minimum based on viewport height | Most full-page sections and columns | May still need layout tools for complex structures |
| Flexbox + |
Cheat Sheet
Quick fixes
Make an element fill the browser height
.element {
min-height: 100vh;
}
Use percentage height correctly
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.child {
height: 100%;
}
Key rules
height: 100%needs a parent with explicit height100vhmeans 100% of the viewport heightmin-heightis usually safer thanheight- backgrounds only fill the element's actual height
- reset
body { margin: 0; }when building full-screen layouts
Recommended default for this problem
body {
margin: ;
}
{
: ;
: ;
}
FAQ
Why does height: 100% not work on my div?
Because percentage height only works when the parent element has an explicit height.
Should I use height: 100vh or min-height: 100vh?
Usually min-height: 100vh is better because it fills the screen but still allows the element to grow if content is taller.
What does vh mean in CSS?
vh stands for viewport height. 100vh means the full height of the visible browser window.
Do I need to set html and body to height: 100%?
Only if you are using percentage-based heights like height: 100%. It is not required for 100vh.
Why does my full-height layout still show a small gap around the page?
That is often caused by the browser's default body margin. Set body { margin: 0; }.
Is Flexbox a good choice for two-column full-height layouts?
Yes. Flexbox is one of the most common and cleanest ways to build side-by-side columns that stretch together.
Mini Project
Description
Build a simple two-column page where the right panel always shows a full-height gray background, even when it contains very little content. This demonstrates the difference between content-based height and viewport-based height in a practical layout.
Goal
Create a two-column layout where the right column fills at least the full browser height and can still grow taller if more content is added.
Requirements
- Create a left column and a right column.
- Place the columns side by side.
- Give the right column a gray background.
- Make the right column fill at least the full browser window height.
- Remove default page margin so the layout touches the edges cleanly.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers.
Get the Selected Radio Button Value with jQuery
Learn how to find which radio button is selected in jQuery and get its value with simple examples and common mistakes.