Question

When I make a <div> column 100%, and I fill it with content and then scrolling down the background is empty.

But when the <div> is empty I also want it to be height 100% so that you see the background from top to bottom.

Does someone know why and how to solve this?

• example here with scroll
• example here without scroll

Answer 1

You want to make the page 100% in height, and also ensure the div is at least as tall as the page. So, use this:

html, body {
    height: 100%;
}

#fullheight {
    min-height: 100% !important;
    width: 250px;
    background: blue;
}

This ensures that the fullheight div is not constrained to only 100%, and that the page is at least full height.

Fiddles: http://jsfiddle.net/KfjGU/138/, http://jsfiddle.net/KfjGU/139/