html5：具有固定顶部/底部和可滚动中间的三行弹性框 [英] html5: three-rows flexbox with fixed top/bottom and scrollable middle

问题描述

可以使用固定页眉/页脚和可滚动<$ c $>的 html5 c> article 部分，例如 firefox 24和 chrome 31？

Is it possible to make an html5 flexbox layout with fixed header/footer and a scrollable article section like the following for firefox 24 and chromium 31?

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

（简化）：

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

现在我试图用 article ，但如果内容高度小于窗口高度，则页脚不固定，如果它更大，页脚将滚出可见区域...

and now I'm trying to fill the remain space with the article, but if the contents height is smaller than the window height, the footer is not fixed and if it's bigger, the footer scrolls out of the viewable area...

推荐答案

您可能需要确保身体的高度为100％：

You probably need to make sure the body is 100% high:

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

我做了小提琴。

这篇关于html5：具有固定顶部/底部和可滚动中间的三行弹性框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！