i simplified my code to look like this, you should see there's an outer div with its height set to 100%, and there's an inner div contains a image, the "spacer.gif" could be any image to use as a stretcher.
now my problem is: let's say this image height set to 1000px, and if your browser window's height is less than 1000px, a scrollbar will appear, if you scroll it down, the extra space is not filled up with the outer div's background color.
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 stretchable?
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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css" media="screen">
font-family: Arial, Helvetica, sans-serif;
<div style="height: 100%; background-Color: Red;">
<img src="images/spacer.gif" alt="" height="1000px" width="500px" />