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

时间:2013-10-20 13:07:46

标签: html5 css3 flexbox

是否可以为{em> firefox 24和 chrome创建一个html5 flexbox布局,其中包含固定header/footer和可滚动的article部分,如下所示 31?

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

我试过这个(简化):

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

现在我正在尝试使用article填充剩余空间,但如果内容高度小于窗口高度,则页脚不固定,如果它更大,则页脚滚出可见区域......

1 个答案:

答案 0 :(得分:14)

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

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

我做了fiddle