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>

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>

• javascript
• html
• css

3 Answers 3

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>

I think the correct modern way to aplish 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 patibility here)

It also gives you more flexibility. If you later decide to add new rows (or even side columns) is very easy to aplish 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>

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