html5 : three-rows flexbox with fixed top/bottom and scrollable middle

Question

是否可以制作一个具有固定 header/footer 和可滚动 article 部分的 html5 flexbox 布局，如下所示 firefox 24 和 chromium 31？

+----------+
| header   |
+----------+
| article ||
|         ||
|         ||
|         ||
+----------+
| footer   |
+----------+

我试过这个(简化版):

body {
  display: flex;
  flex-direction: column;
}
header {
  flex: 1;
}
article {
  flex: 8;
  overflow-y: scroll;
}
footer {
  flex: 1;
}

现在我试图用 article 填充剩余空间，但如果内容高度小于窗口高度，则页脚不固定，如果更大，则页脚滚动超出可视区域...

Answer 1

您可能需要确保 body 100% 高:

html, body {
    margin:0;
    height:100%;
    min-height:100%;
}

我做了一个fiddle .