是否有可能制作一个带有固定页眉/页脚的
html5 flexBox布局和一个可滚动的文章部分,如下所示的firefox 24和chrome 31？
+----------+ | header | +----------+ | article || | || | || | || +----------+ | footer | +----------+
我试过这个(简化)：
body {
display: flex;
flex-direction: column;
}
header {
flex: 1;
}
article {
flex: 8;
overflow-y: scroll;
}
footer {
flex: 1;
}
现在我正试图用文章填充剩余空间,但如果内容高度小于窗口高度,则页脚不固定,如果它更大,则页脚滚出可视区域…
解决方法
您可能需要确保身体100％高：
html,body {
margin:0;
height:100%;
min-height:100%;
}
我做了一个fiddle.