header content footer divs

[mattmill30]

Hi,Is it possible to have a content div which fills the available whitespace between header and footer divs?I have three divs.I'd like one to sit at the top of the page (header), one to use up as much of the body has possible (content) leaving enough room for one to sit below the (footer).I've given the content div, overflow: scroll, so that if theres to much content to fit between the header and footer divs it just scrolls, without making the footer go off the end of the page.What i'm getting atm, is even with overflow: scroll, the div is still just forcing the footer div off the page.What I thought might've worked is giving the body tag a max-height: 100%, but this doesn't make a difference.Is there any way of making the content div enlarge as big as needed, stopping when the base of the footer div is touching the bottom of the visible page?I'm hoping to avoid using absolutely positioned elements if possible, as the content div may not contain enough content in some instances for it to use the whole page, and so the footer div needs to sit below the content div, as opposed to sitting at the bottom of the screen, and the content div just compensating with a margin.I hope that makes sense Thanks in advanced for any help you can provide.Matthew Millar

[real_illusions]

Look into 'sticky footers' on Google, that may help you in what your after with a bit of playing around.

[mattmill30]

Hi real_illusions,I'm not actually looking for a sticky footer.I'm looking for a way of preventing a div from causing the page to overflow (requiring a scroll-bar).I want the content div to expand into the page until it runs out of space. Which would be when the footer hits the bottom of the page.Once the footer hits the bottom of the page, I'm trying to trigger the overflow:scroll on the content div.Thanks,Matthew Millar

[real_illusions]

Well, if you had a sticky footer, then that would stay at the bottom, then you can hopefully work out the relative height needed for the content.