Simple Responsive Design--How do I create a sticky header and footer and then force the content div to expand between them?

Question

Thanks for looking.

I am trying to make a very simple responsive HTML layout:

HTML:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

CSS:

#header{
    width: 100%;
    height: 50px;
}

#content{
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 50px;
}

The end-product should be a page that has a 50px tall header anchored to the top of the screen and a 50px tall footer anchored to the bottom of the screen. In between, the "content" div should expand to fill the space between the header and footer no matter what the size of that space.

I have already checked out several tutorials on "sticky footers" and, unfortunately, they aren't quite what I am after as they do not account for the "content" div expanding to fill the space between header and footer.

This is a close example of what I am after, but this site is written in Flash:

http://www.wearegolden.co.uk/

Try resizing your screen when you look at this.

What am I missing here? Thanks!

SOLVED!

HTML:

<div id="header">
</div>

<div id="content">
    content
</div>

<div id="footer">
</div>

CSS:

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

#header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

#content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

#footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

THANKS!

Answer 1

sounds like you need to just fix the header and footer.

header{position:fixed; top:0; z-index:10}
footer{position:fixed; bottom:0; z-index:10}

The main body content will scroll between these fixed elements, if larger than the space.

note I believe its good practice to z-index in multiples of 10. This gives you the flexibility to slot an element into your stack if one is missed out.

Answer 2

If you're looking for a simple solution, you can position the header and footer in a fixed position at the top and bottom of the page.

.header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

Here's an example:

http://codepen.io/anon/pen/eCEca

Alternatively, you may want to look into something like jQuery Mobile's persistent navbars, which offers what you're looking for: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html