100% height for an absolute div

div

[Brodie Magenta]

Hi guys,

I've done some searching and though some similar posts have vaguely touched on the subject I can't find the definitive answer to my troublesome div problem.

Basically I have a site with a dynamic height. As in - the height changes and I have no idea of how high it finally will be due to content. I have a side navigational div which I would like to *grow* depending on the size of the overall body of the page.

Beside the side nav div I have a main content area which is NOT absolutely positioned.

By setting :

body {
height: 100%;
}

I can reference min-height: 100% in the main content div and it grows according as to the overall height of the body however the same values in the left hand side div will only stretch the div to the height of ONE screen. When I scroll down the shrinking stops.

#sidebar{
position: absolute;
left: 0;
min-height: 100%; /* does not have any effect */
background: url(/site/images/side.gif) repeat;
border: 0;
...
}

#primarycontent
{
background: url(/site/images/content.gif) repeat;
min-height: 100%; /* stretches the div completely */
margin: 0;
width: 774px;
}

Any idea's would be greatly appreciated.

Thanks in advance,

Brodie

[silk]

I'm not 100% sure about this, but i think it's just a matter of how browsers implement the CSS. 100% height for an absolute div, may be intepreted as 100% of the document window. i.e. your screen.

You can 1)
try setting the body position to:
position:relative;

2) define the width of the sidebar, but leave the height undefined. (This can have unsightly effects in Mozilla based browsers).

i'm new to CSS and grapling with these little nuances myself. I hope something here works out. Let me now though. I'll give it a bit more time...i'm dead tired now...;)

g

[Brodie Magenta]

Thanks,

I got around it by using a container which had a repeating background image and then placing a side bar over this and just floating it to left.

I'd like other people to suggest reasons why the height taken was as the browsers screen size in an absolutely positioned div. I haven't tried your suggestion of setting the body's position to relative yet though -

Thanks for the reply

Brodie

[createErrorMsg]

You've actually landed on the best solution for this already...float the sidebar and set the container background as a repeating image positioned beneath the sidebar.

As for this...

I'd like other people to suggest reasons why the height taken was as the browsers screen size

The question you have to ask when you use 100% is: 100% of what? In the case of a nested <div>, 100% height equals the height of its container. However, an absolutely positioned element is removed from the flow and therefore can only be contained by (a) the nearest positioned parent container--if one exists--or (b) the document window.

Guess which one it's using in your case?

Incidentally, min-height is not supported by IE browsers.