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

Depending on how your page is set up, it may work if you set height: 100%; for (B) and position: absolute; for the container element. Here is an example:

HTML:

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>​

CSS:

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}​

jsFiddle