CSS background doesn't stretch to the full height

Question

I have an element with 100% height. If there are a lot of blocks, then they go beyond it.

jsfiddle example: http://jsfiddle.net/yPqKa/

How to fix it?

Thanks in advance.

CSS:

html, body {
    height: 100%;
    width: 100%;
}
.content-background {
    background-color: #000;
    height: 100%;
    width: 100%;
}
.content {
    background-color: #eee;
    height: 50px;
    width: 100%;
    margin-top: 60px;
}

Answer 1

Set a min-height on the body :

html {
    height: 100%;
    width: 100%;
}
body{
    min-height:100%;
}

DEMO

This will allow the body to adapt it's height to the overflowing content.

Answer 2

The problem is that you have set the height of the html and body elements to 100% of their container, which restricts them to be smaller than the elements they contain. If you remove the height: 100%; from the second line, it will work.