Extend div to bottom of page (only HTML and CSS)

Question

Its a very simple problem but I can't seem to find a suitable solution online. I want to have a list of elements in natural flow with the last element extended to the bottom of the page. So if I have

<div id="top" style="height:50px;"></div> <div id="bottom" style="background:lightgrey;"></div> 

I need element bottom to extend from the bottom of top to the bottom of the page. Any solution that uses only html and css is welcome, and you can add container divs or anything, as long as I can get dynamic resizing of the bottom div

EDIT: I don't want to hard-code any values for bottom, because I want bottom to adjust if top is resized

here's a fiddle for all your fiddling needs: http://jsfiddle.net/8QnLA/

Answer 1

Solution: #1: css tables:

html, body {   height: 100%;   width: 100%; } body {   display: table;   margin: 0; } #top, #bottom {   width: 100%;   background: yellow;   display: table-row; } #top {   height: 50px; } #bottom {   background: lightgrey;   height: 100%; } 

html, body {    height: 100%;    width: 100%;  }  body {    display: table;    margin: 0;  }  #top, #bottom {    width: 100%;    background: yellow;    display: table-row;  }  #top {    height: 50px;  }  #bottom {    background: lightgrey;    height: 100%;  }

<div id="top" style="height:50px;"><span>A header</span></div>  <div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen #1 (little content)

Codepen #2 (lots of content)

Solution #2: Using calc and viewport units

#top {   height: 50px;   background: yellow; } #bottom {   background: lightgrey;   min-height: calc(100vh - 50px); } 

body {    margin: 0;  }  #top {    height: 50px;    background: yellow;  }  #bottom {    background: lightgrey;    min-height: calc(100vh - 50px);  }    Where `min-height: calc(100vh - 50px);` means:    'Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.'

<div id="top" style="height:50px;"><span>A header</span></div>  <div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen #1 (little content)

Codepen #2 (lots of content)

Solution #3 - Flexbox

body {   margin: 0;   min-height: 100vh; } body {   display: flex;   flex-direction: column; } #top {   height: 50px;   background: yellow; } #bottom {   background: lightgrey;   flex: 1; } 

body {    margin: 0;    min-height: 100vh;  }  body {    display: flex;    flex-direction: column;  }  #top {    height: 50px;    background: yellow;  }  #bottom {    background: lightgrey;    flex: 1;  }

<div id="top" style="height:50px;"><span>A header</span></div>  <div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen #1 - little content

Codepen #2 - lots of content