css – 带有y轴滚动的内部柔性盒容器的Flex-box粘性页脚

我知道这个主题是满口的,但我找不到一个更好的方式来描述它.

我有一个标题,内容正文,页脚布局,其中页脚是’粘性’使用flex css,这非常有效.我在内容体中有另一个容器需要扩展以填充可用高度,当它的内容被追加时,它会滚动.到目前为止,我能够使用它的唯一方法是将内容体的高度设置为静态px值,这会破坏我所需的垂直响应性.

Codepen我的尝试：http://codepen.io/sinrise/pen/QwKPKp

html,body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}
#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexBox/demos/sticky-footer/ */
}
#header {
  background: yellow;
  height: 30px;  /* can be variable as well */
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 200px;
}
.item:nth-child(odd) {
  background: #fbfbfb;
}
#footer{
  background: lime;
}

最佳答案

尝试添加

#body {
    display: flex;
    flex-direction: column;
}
.content {
    height: 0;    /* Reduce the height as much as possible... */
    flex-grow: 1; /* ...but make it fill all remaining space  */
}

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#header {
  background: yellow;
  height: 30px;
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 0;
  flex-grow: 1;
}
.item:nth-child(odd) {
  background: #fbfbfb;
}
#footer {
  background: lime;
}