How to make a div full height of remaining space on screen - html

Question

I've recently published my new website but on larger resolution monitors my 2nd content div which comes under my navigation and a small piece of text only expands to the size of the content within it which is fine except from one page where there is very little content meaning there is a large white section between it and the page footer.
Here's a demo: http://jsfiddle.net/XUuVL/
I was wondering how I could make it so that the grey area would fill that whitespace left underneath it.
Cheers.
html,body
{
background: #FFFFFF;
font: 0.74em Arial;
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0;
}
#content
{
width: 90%;
min-width: 1000px;
height: 100%;
padding: 20px 5% 20px 5%;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
#content2
{
width: 90%;
min-width: 1000px;
height: auto;
min-height: 100%;
padding: 60px 5% 20px 5%;
background: #808080;
overflow: hidden;
}

Answer 1

In this case, since body and #wrapper have 100% height, you cannot give height in percentage to children elements. It would work if you give fixed height i.e. height in percentage to #wrapper.
You can give gray color to body and give white color to #content.

Answer 2

Check this out: http://jsfiddle.net/XUuVL/2/
.
Using position: absolute; and bottom: 0; solving your problem

Answer 3

You can give the wrapper element the same background and the bottom box-shadow as content2. Then it will look like content2 extends to the bottom. You must also give it the same width
#wrapper {
width: 90%;
min-width: 1000px;
background: #808080;
-moz-box-shadow: inset 0 -8px 8px -8px #000000;
-webkit-box-shadow: inset 0 -8px 8px -8px #000000;
box-shadow: inset 0 -8px 8px -8px #000000;
}
Now you remove the bottom box-shadow from content2 and give a white background to the content element
#content {
background: #FFFFFF;
}
#content2 {
-moz-box-shadow: inset 0 8px 8px -8px #000000;
-webkit-box-shadow: inset 0 8px 8px -8px #000000;
box-shadow: inset 0 8px 8px -8px #000000;
}
See modified JSFiddle

Answer 4

add position: absolute in your content2 ... i hope you will want like this...
#content2
{
position:absolute;
width: 90%;
min-width: 1000px;
height: auto;
min-height: 100%;
padding: 60px 5% 20px 5%;
background: #808080;
overflow: hidden;
}