粘性页脚还原

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 在只需要拉伸顶级 div 时提供了一些很好的解决方案，但在我的场景中，我可以让 #body（橙色 bg）拉伸但我需要 #content（黄色）拉伸一路向下。

我该怎么做？

Answer 1

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