How to Make a Div Fill Remaining Height in CSS

By the end of this page, you will understand how to make a section fill the remaining viewport height below a header with unknown height. You will learn why percentage heights often fail, how modern CSS layout tools like Flexbox solve this cleanly, and how to structure nested elements so height: 100% and other percentage-based heights work reliably.

In CSS, making one element fill the remaining height is a layout problem. The browser needs to know two things:

1. the total available height
2. how much space other elements already use

Traditional table layouts could do this automatically, which is why they were often used in older web apps. But modern CSS provides better tools for this, especially Flexbox.

The key idea is:

• make the page take up the full viewport height
• let the header size itself naturally
• allow the content area to grow and fill whatever space is left

This is exactly what Flexbox is designed for.

A very common beginner issue is trying to solve this with height: 100% alone. That often does not work unless every parent element has a defined height. Percentage heights depend on the height of the parent, so if the parent's height is auto, the child's percentage height cannot be resolved the way you expect.

For layouts like:

• header
• main content fills the rest
• nested panels inside content use percentage heights

Flexbox is usually the best solution.

Why this matters in real programming:

• dashboard layouts often need a fixed or variable header with a scrollable body
• admin apps commonly need side panels or content regions that fill available space
• modals, editors, and split-view UIs often depend on parent-controlled height
• data tables and charts frequently need to stretch inside a container

So this is not just about one div; it is about understanding how height flows through a layout.

Think of the page like a vertical stack of boxes inside a bookshelf with a fixed height.

• The bookshelf is the viewport.
• The header is a box that takes however much room it needs.
• The content area is a flexible box that expands to fill all remaining shelf space.

Inside that flexible content box, you can then divide the space again:

• one child can take 100%
• two children can take 50% each

But this only works if the parent box has a real, known height.

So the rule of thumb is:

percentage heights work only when the parent has a definite height.

Flexbox helps create that definite remaining height automatically.

Basic Flexbox solution

<div class="page">
  <header class="header">
    Logo and account info
  </header>

  <main class="content">
    Main content
  </main>
</div>

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

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 16px;
  background: #ddd;
}

.content {
  flex: 1;
  overflow: auto;
  background: #f5f5f5;
}

What this does

• makes as tall as the viewport

Consider this example:

<div class="page">
  <header class="header">My Header</header>
  <main class="content">
    <div class="box">I fill the remaining height</div>
  </main>
</div>

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

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 24px;
}

.content {
  flex: 1;
}

.box {
  height: 100%;
  background: peachpuff;
}

Where this pattern is used

Dashboards

A dashboard may have:

• a top navigation bar
• a chart or data table below it

The chart area should fill the remaining height and scroll internally if needed.

Admin panels

Many admin tools use:

• a header with account actions
• a main working area below

This keeps the top controls visible while the main content grows and scrolls.

Chat applications

A chat app often has:

• a header with room or user info
• a message list filling the remaining space
• sometimes nested panels inside the content area

Code editors and IDE-like layouts

Browser-based editors often need:

• a toolbar at the top
• editor panels filling the rest of the screen

Data tables

A page may need a filter bar on top and a table below that fills the rest of the viewport without making the entire page scroll.

In real projects, developers usually combine this pattern with a few common layout habits.

1. Flex column shell

A common app shell looks like this:

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  min-height: 0;
}

This creates a reliable full-height page structure.

2. Scroll only where needed

Instead of scrolling the whole page, developers often scroll just the content region:

.app-main {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

This is useful for sticky headers, fixed toolbars, and split layouts.

3. Nested flex layouts

Inside the content area, developers often create another flex layout:

.content {
  display: flex;
  flex-direction: column;
}

.panel {
  flex: 1;
}

1. Using height: 100% without defining parent height

Broken example:

.content {
  height: 100%;
}

This does not work if the parent does not have a definite height.

Fix

Make the parent a full-height container or use Flexbox:

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

2. Forgetting to set html, body height

If you rely on percentage heights, this matters.

Broken example:

body {
  margin: 0;
}

.page {
  height: 100%;
}

Fix

html, body {
  : ;
  : ;
}

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

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  /* natural height */
}

.content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

Rules to remember

• height: 100% needs a parent with a defined height.
• flex: 1 makes an element fill remaining space.
• Use min-height: 0 on flex children that should shrink and scroll.
• Use tables for tabular data, not page layout.
• Use 100vh when you want viewport height.
• If child elements use percentage heights, the parent must have a real computed height.

Useful alternatives

Flexbox

.page {
  display: flex;
  flex-direction: column;
  : ;
}

How do I make a div take the rest of the page height?

Use a parent container with display: flex, flex-direction: column, and give the content area flex: 1.

Why does height: 100% not work in my div?

Because percentage height only works when the parent has a defined height. If the parent height is auto, the child cannot reliably fill it.

Can I do this without knowing the header height?

Yes. Flexbox and Grid both work well when the header has dynamic height.

Is using a table for page layout bad?

It is outdated for general layout. Tables are intended for tabular data, not app page structure.

What if I want only the content area to scroll?

Set overflow: auto on the content area and keep the overall page container at viewport height.

Can children inside the content area use height: 50% or height: 100%?

Yes, as long as the content area has a definite height, which Flexbox can provide.

Should I use Flexbox or Grid for this layout?

Use Flexbox for a simple vertical header/content layout. Use Grid if the page also needs more complex rows and columns.

• Flexbox — the main modern CSS tool for filling remaining space in one dimension.
• CSS Grid — another layout system that can define auto and 1fr rows for header/content layouts.
• Percentage heights in CSS — directly related because nested height: 100% depends on parent height.
• Viewport units (vh) — useful for making the outer container match the screen height.
• Overflow — important when the content area should scroll instead of the whole page.
• Block formatting vs flex formatting — helps explain why normal block elements do not automatically fill leftover height.
• min-height in flex layouts — important for preventing overflow issues in scrollable flex children.