div stretch 100% page height regardless of content

Question

live (work in progress) site

Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%; for html, body, and #main however the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?

Answer 1

You can achieve by 2 ways:

1) Give Height to 100% if you don't know how long page could be.

html, body {
    height: 100%;
}
.yourContainerClass {
    min-height: 100%;
}

2) If you know how much you need to stretch vertically then you can use height in "vh(vertical height)".

.yourContainerClass{
    height:80vh;
}

I hope it will help you. Thank you!

Answer 2

You can set position:absolute, and that should stretch it to the bottom. Seems as if that will work fine in Opera and Chrome at least.

That will, however, be in conflict with the video player below, and also push your copyright notice down below the page. Maybe you can move the notice up into the gray box though?

Answer 3

see this jsfiddle

html, body {height: 100%;}
.container {min-height: 100%;}

discussing this over here too.....

proper css to ensure that the body element fills the entire screen