Sticky footer redux

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%;
}