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

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

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!