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

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

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

Answer 3

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?