How can i set body to be 100% and still expand past page height

Question

I'm trying to expand the body's height to be beyond 100% of the page.

If i set

body, html { height: 100%; 
             background-color: darkbrown; }
.container { height: 100%; }

then if the content inside container goes beyond 100% it overflows and the color isnt saved. The problem here is that unless I remove the height or change it to min-height it will continue this behavior. What can I do to change this? Keep in mind that setting height % is necessary to create sticky footer.

Here's a fiddle with a better expample:

http://jsfiddle.net/hfqGu/1/

ive tried setting overflow to auto but with no avail.

Answer 1

Remove height:100% specified for the body tag.