Sticky footer redux - css

Question

code pen
HTML
<div id="header">header</div>
<div id="body"><div id="content">content</div></div>
<div id="footer">footer</div>
CSS
#header {
background-color: red;
}
#body {
background-color: orange;
}
#content {
width: 500px;
margin: 0 auto;
background-color: yellow;
}
#footer {
background-color: blue;
}
body {
display: table;
height: 100%;
width: 100%;
}
#header,#footer,#body {
display: table-row;
height: 1px;
}
#body {
height: auto;
}
#content {
/* ??? */
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}
This answer provides some good solutions when just the top-level div needs to be stretched, but in my scenario, I can get #body (orange bg) to stretch but I need #content (yellow) to stretch all the way down as well.
How can I do that?

Answer 1

Demo http://codepen.io/anon/pen/Bltbh
#header {
background-color: red;
}
#body {
background-color: orange;
height:100%;
}
#content {
width: 500px;
margin: 0 auto;
background-color: yellow;
}
#footer {
background-color: blue;
}
body {
display: table;
height: 100%;
width: 100%;
}
#header,#footer,#body {
display: table-row;
}
#header,#footer {
height:1px;
}
#body {
height: 100%;
}
#content {
height: 100%;
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}