Classic 'inner div to fill rest of height'-question!

Question

I've tried to find a solution that matches my basic CSS problems when designed new pages. But without luck, even though it has come close...

Say I have the following:

• A main div wrapper to fill 100% height (no problem)
• An inner div to fill rest of height PLUS the extra contents (scrollable) <-- this is hard IMO.

The Content div should fill the rest of the height...

The only problem is that if I use position:absolute,left:0;bottom:0;top:0; on the Content; if the contents of the Content exceeds the browser's initial height, this will happen:

... And the page will be weird-looking. Would be nice, if the Div itself, would scale WITH the contents... :-)

How is that possible?

Answer 1

There is really no good way to do this in CSS (although maybe a guru will come by and show me wrong), may be helpful to read about sticky footers,

http://www.cssstickyfooter.com/

also discussed on several threads here, if you are trying to ensure that the footer won't appear halfway down the page. This can be accomplished purely with CSS, and if you absolutely need the content div to take up the remaining space (nothing a body background shouldn't be able to take care of..), then you can use javascript to set the height of the element to be document.height - the height of the header and footer.

I'm sorry I wasn't able to give a better response, 3 minutes left on my laptop battery, but I'll be back.