Div height 100% and expands to fit content

Question

I have a div element on my page with its height set to 100%. The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works for making the div height 100% of the browser screen height, but the problem is I have content inside that div that extends vertically beyond the browser screen height. When I scroll down, the div ends at the point at which you had to begin scrolling the page, but the content overflows beyond that. How do I make the div always go all the way to the bottom to fit the inner content?

Here's a simplification of my CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Once I scroll the page, the blackness ends and the content flows onto the red background. It doesn't seem to matter whether I set the positon to relative or absolute on the #some_div, the problem occurs either way. The content inside the #some_div is mostly absolutely positioned, and it is dynamically generated from a database so its height can't be known in advance.

Edit: Here is a screenshot of the problem:

Answer 1

Here is what you should do in the CSS style, on the main div

display: block;
overflow: auto;

And do not touch height