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

Question

是否可能使用固定的header/footer和可滚动的article部分来创建像以下这样的HTML5弹性盒子布局，适用于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填充剩余空间，但如果内容高度小于窗口高度，则页脚不会固定，如果高度大于窗口高度，则页脚会滚动到不可见区域之外...

- net.user

---

为什么文章的flex等于8？ - Paul Totzke

@PaulTotzke 我来咬钩了。可能没有人知道。现在人们通过8层间接引用粘贴东西。这段代码片段可能最初是为一个特定的情况编写的，当它被复制粘贴到互联网上时也幸存了下来。除了1之外，很少需要使用任何其他值来设置flex-grow，通常人们想要的是flex-basis。各位，只需阅读https://www.w3.org/TR/css-flexbox/，它实际上并不难理解，我甚至不是以英语为母语的人，但我在三天内就掌握了。 - Armen Michaeli

这就是我想的，但有时会有一些奇怪的浏览器修复程序。只需要确保一下。 - Paul Totzke

Answer 1

您可能需要确保 body 的高度为 100%：

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

我制作了一个Fiddle。

- Moob

---

你的实现是正确的，但有一个缺陷，你的标题和页脚大小与页面大小相关，在大多数情况下并不理想。这里提供了替代方案 https://jsfiddle.net/njfmt7w0/ - mamu

真的无法给这个评论点赞够了。完全就是我遇到的问题。 - Ruben Martinez Jr.

Mamu评论中的链接是一个非常简单和清晰的例子。谢谢。 - Vincent James

在手机上，当您开始滚动时，菜单栏/地址栏通常会消失。这样做的好处是您可以获得可用的完整浏览器高度。但是，这种布局阻止了此行为，我认为这是不可取的。还有，在iPad上的Safari中，我注意到滚动的元素一旦您不再移动手指，就会停止移动。通常需要一段时间才能停止滚动。我不会在任何布局中使用它。 - Jette

Mamu的解决方案是不正确的，因为该文章不能拉伸以填充可用空间，所以页脚可以向上移动。我会采用Moob的解决方案，但从页眉和页脚中删除flex: 1以使它们成为固定大小。此外，使用overflow-y: auto而不是overflow-y: scroll可以在不需要滚动条时使其消失。 - Qwertie