Content with 100

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

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:

    

    

    

​

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