html5:三行flexbox,固定的顶部/底部和可滚动的中间

Question

是否有可能使一个html5固定Flexbox的布局header/footer和一个滚动的article部分像下面的Firefox 24和铬 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

你可能需要确保身体高100%:

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

我做了一个小提琴.