Content with 100% between header and footer

Question

Lets assume I have the following layout (see image below)... I have a header (A) at the top, footer (C) that is always at the bottom and container (B) that is in the middle and should fill the space left between the header and the footer by 100%.

Can't think of any way how to achieve this using pure css. Any ideas would be appreciated!

Answer 1

Your question pretty much describes how standard block-level elements, such as DIVs, behave. The center div will always take up 100% of the space between the two, and it'll grow based on it's inner content.

That said, I'm going to assume you want a FIXED footer - one that stays positioned at the bottom of the browser window. This is achiavable using a number of techniques, one of which is using absolutly positioning:

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

Style:

#header, #footer, #content { position: absolute; left: 0; width: 100%; }
#header, #footer { overflow: hidden; background: #444; height: 100px; }
#header { top: 0; }
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; }
#footer { bottom: 0; }​

http://jsfiddle.net/U9wfy/