Make a div fill the height of the remaining screen space

Question

I am working on a web application where I want the content to fill the height of the entire screen.

The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.

I have a header div and a content div. At the moment I am using a table for the layout like so:

CSS and HTML

#page {

height: 100%; width: 100%

}

#tdcontent {

height: 100%;

}

#content {

overflow: auto; /* or overflow: hidden; */

}

...

The entire height of the page is filled, and no scrolling is required.

For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work.

Is there a way to achieve the same effect without using the table?

Update:

Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.

Update 2:

For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.

Alastair Mcdade · Accepted Answer

To solve div fill remaining height

Major browsers such as Firefox,chrome,explorer and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim. Have a look at this to check current support: http://caniuse.com/#feat=flexbox

For Example:

You can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions by using flexbox.

You need to add a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space like this:

html,
body {
  height: 100%;
  margin: 0
}
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.box .row {
  border: 1px dotted grey;
}
.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}
.box .row.content {
  flex: 1 1 auto;
}
.box .row.footer {
  flex: 0 1 40px;
}


  
    header
      
      (sized to content)
  
  
    
      content
      (fills remaining space)
    
  
  
    footer (fixed height)

Run code snippetExpand snippet to solve div fill remaining height

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

Ranjana Admin · Answer

To make a fill the height of the remaining screen space, you can use various CSS techniques depending on the layout you are aiming for. Here are some common methods:

1. Using Flexbox

Flexbox is a powerful layout tool that can easily make a fill the remaining space.

Fill Remaining Height

Header

Content that fills remaining height

Footer

Explanation

html, body { height: 100%; margin: 0; }: Ensure the and elements take up the full height of the viewport.

.container { display: flex; flex-direction: column; height: 100%; }: The container is set to be a flex container that takes up the full height of the viewport and arranges its children in a column.

.content { flex: 1; }: The content div will expand to fill the remaining space.

2. Using CSS Grid

CSS Grid is another powerful layout system that can be used to achieve the same effect.

Fill Remaining Height

Header

Content that fills remaining height

Footer

Explanation

html, body { height: 100%; margin: 0; }: Ensure the and elements take up the full height of the viewport.

.container { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }: The container is set to be a grid container that takes up the full height of the viewport. It defines three rows: the header (auto height), the content (flexible height), and the footer (auto height).

.content: This row with 1fr will expand to fill the remaining space.

3. Using Absolute Positioning

This method involves using absolute positioning to make the content fill the remaining space.

Example

Fill Remaining Height

Header

Content that fills remaining height

Footer

Make a div fill the height of the remaining screen space

About this question

Your answer

2 Answers

More Devops discussions

Learn & Explore

Popular Tutorials

DevOps Interview Q&A

Latest DevOps Blogs

Want answers to more DevOps questions?

Stay in the loop — it’s free

You’re on the list!