12

是否可以为firefox 24 和chromium 31制作具有固定和可滚动部分的html5flexbox 布局,如下所示?header/footerarticle

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

我试过这个(简化):

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

现在我正在尝试用 填充剩余空间article,但是如果内容高度小于窗口高度,则页脚不固定,如果更大,页脚将滚动到可视区域之外...

4

1 回答 1

19

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

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

我做了一个小提琴

于 2013-10-20T13:19:26.210 回答