Forum Moderators: not2easy

Message Too Old, No Replies

css background issue

         

joeylu

4:23 pm on Mar 23, 2010 (gmt 0)

10+ Year Member



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?

piroman

4:49 pm on Mar 23, 2010 (gmt 0)

10+ Year Member



That is the same problem I had.
see here:
[webmasterworld.com...]

I had to turn my data in the scrollbox into a table to make the background fill in.

joeylu

5:03 pm on Mar 23, 2010 (gmt 0)

10+ Year Member



you mean if I transfer the Div to Table, by setting the table height="100%" and background color, it will eventually fill up the extra space that created by dynamic contents after page load?

piroman

7:20 pm on Mar 23, 2010 (gmt 0)

10+ Year Member



I setup tables inside the divs and the color filled in.

joeylu

2:30 am on Mar 24, 2010 (gmt 0)

10+ Year Member



just tried your solution, and it didn't work on my case..

this is my code:

<!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;">
<table>
<tr>
<td>
<img src="images/spacer.gif" alt="" height="1000px" width="500px" />
</td>
</tr>
</table>
</div>
</body>
</html>

the image spacer.gif is just a transparent gif file to fill up the space, set your browser's height less than 1000, and scroll down, you should get the picture

joeylu

5:08 am on Mar 24, 2010 (gmt 0)

10+ Year Member



ok, got this one by myself

if i put min-height: 100%; instead height: 100%;, that solves the problem