• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

div background color stretch

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css" media="screen">
        html, body 
        {
            margin: 0;
	        height: 100%; 
	        font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <div style="height: 100%; background-Color: Red;">
        <div>
        <img src="images/spacer.gif" alt="" height="1000px" width="500px" />
        </div>
    </div>
</body>
</html>

Open in new window

0
joeylu
Asked:
joeylu
  • 2
1 Solution
 
CPetrich12Commented:
Add another inner div and tell it to clear:both.

http://csscreator.com/node/543
0
 
joeyluAuthor Commented:
hi, tks for the quick reply, but the solution doesn't work on my sample..

here, i added another div with clear: both as you mentioned, if i scroll down the page, the background color still not stretches..

This is what I added:
    <div style="height: 100%; background-Color: Red;">
      <div style="clear: both;">
          <div>
          <img src="images/spacer.gif" alt="" height="1000px" width="500px" />
           </div>        
        </div>
    </div>

And I also tried this:

    <div style="height: 100%; background-Color: Red;">
      <div style="clear: both;">
      </div>
      <div>
          <img src="images/spacer.gif" alt="" height="1000px" width="500px" />            
       </div>
    </div>

both of them doesn't stretch
0
 
remorinaCommented:
Specify min-height instead

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <style type="text/css">
        .mainContainer {min-height:100%;background-Color: Red;}
    </style>

</head>
<body>
    <div class="mainContainer">
      <div style="clear: both;">
      </div>
      <div>
          <img src="images/spacer.gif" alt="" height="1000px" width="500px" />            
       </div>
    </div>
</body>
</html>

Open in new window

0
 
joeyluAuthor Commented:
good tips, tks
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now