Nested CSS Full-Height DIV

treschonde · 07-09-2007, 05:41 AM

I have a somewhat complex design going on, so I've removed parts to display only what I need help with.

http://www.behindlacrosse.com/test/demo.html

On the right hand side, I have 3 divs, 2 with specific heights, and the one in the middle that I would like to repeat downward, so that the whole right hand side matches the height of the center (Body area), (so the bottom div hits the footer).

I don't want to use the full-browser-height technique, by which the footer is always at the bottom of the page. And I know technically this would be easier with tables.. but what's the fun in that? And CSS is just so much nicer.

Any help greatly appreciated! I've kept all the CSS code inside the HTML so it's easily viewable.

Thanks

treschonde · 07-09-2007, 08:32 PM

Do I need to provide anything else to get help?

treschonde · 07-10-2007, 05:27 AM

Well I found one of the problems.. I had accidentally set a height to right column div containing those 3 divs.

That's been updated in the link above, but the problem remains the same.. how to expand a div to 100% of it's parent div, without using body/html{height:100%;} and setting a specific height on the parent. There must be some way with css to have a flexible parent div, and a div inside that can be expanded to 100% of the parent's height?