div stretch 100% page height regardless of content

user_1255049 0
Viewed 23353

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?

height css html
3 Answers

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!

user_18384510
Related