say I have this div tag
<div style="background-color: Red; height: 100%;">
<div id="1" style="overflow: visible; position: relative;">
contents here
</div>
</div>
it does fine job to fill up all my browser page with Red color.
However, as you see there is an inner Div. Let's say if I dynamically load some extra contents into this inner div after the initial page load.
this inner div will expand its height and if it's more than the browser can handle, a scrollbar will appear by browser
now my problem is, ever since the scrollbar appears, if I scroll it down, I can read the extra contents but the outside div's background color disappeared, oh well, just that extra part at bottom.
It looks like the outside Div's background color will not change its height size to fit the new extra space at bottom, despite that i've already set its height to 100%, i think the outside div height value is fixed after the first page load, no matter how it goes afterward.
Anyone can give me a solution to solve this? to make the div background auto resizable?
PS: yes I know if i set the background color to Body tag, it will solve the problem, but imaging if I have two divs, both of them set to 100% height with different background color as a table column?