Set height of div to 100% of remaining space under header

Question

I have 2 divs:

1. A header div at the top of the page with a set height of 150px.

2. A container div sitting under the header div.

What I would like is for the container div to be dynamic and resize to 100% of the remaining space underneath the header div.

I have tried putting in height: 100% but this makes the page need to scroll. I presume it is making the div 100% of the browser height rather than 100% of the remaining body's height.

How can I make it so that the container div simply resizes its height to the remaining body space?

Please find the relevant code below:

 body, html { margin: 0; height: 100%; } #header { width: 100%; height: 150px; background-color: #999999; } #container { width: 760px; height: 100%; background-color: #CCCCCC; margin: 0 auto; } 

 <div id="header"></div> <div id="container"></div> 

Answer 1

You can simply do that by using some math with the calc() CSS function . Subtract 150px (the header size) from 100%. This is dynamically calculated.

body,
html {
  margin: 0;
  height: 100%;
}
#header {
  width: 100%;
  height: 150px;
  background-color: #999999;
}
#container {
  width: 760px;
  height: calc(100% - 150px);
  background-color: #CCCCCC;
  margin: 0 auto;
}

Compatibility: calc() is supported in most modern browsers and IE 9 +

Example fiddle and snippet below:

 body, html { margin: 0; height: 100%; } #header { width: 100%; height: 150px; background-color: #999999; } #container { width: 760px; height: calc(100% - 150px); background-color: #CCCCCC; margin: 0 auto; } 

 <div id="header"></div> <div id="container"></div> 

Answer 2

I think the correct modern way to acomplish this without css hacks is with FlexBox , which as of the writting of this post is supported by all modern browsers. ( you can check browser compatibility here )

It also gives you more flexibility. If you later decide to add new rows (or even side columns) is very easy to acomplish without any calculations.

 html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #container { display: flex; /* Activates FlexBox Model */ flex-direction: column; /* Divs are spanned vertically */ width: 100%; height: 100%; } #header { background-color: #ccc; height: 150px; } #content { background-color: #888; flex-grow: 1; } 

 <div id="container"> <div id="header">My header with some stuff</div> <div id="content">My content</div> </div> 

Answer 3

The outer container has to have position: relative and the div that you want to stretch to the bottom has to have position: absolute . This solution is pure css with no calls to calc().

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

#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#header {
    height: 150px;
    width: 100%;
    background-color: #999999;
}

#mainContent {
    width: 760px;
    top: 150px;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #CCCCCC;
    margin: 0 auto;
    position: absolute;
}

JSFiddle: http://jsfiddle.net/wt0k73bz/