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

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/

Answer 2

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

Answer 3

I came across this question and thought a more "modern" answer would be helpful. This layout is easy using flexbox..

https://www.codeply.com/go/1QgRb4uFmj

<header>
</header>
<main></main>
<footer>
</footer>

html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
  background: #ffffd;
}

main {
  overflow-y: scroll;
  flex: auto;
}