在三行布局中:
顶部行应该根据其内容调整大小
底部一行应该有一个固定的像素高度
中间的行应该扩展以填满容器
问题是,当主要内容展开时,它会压缩页眉和页脚行:
section {
display: flex;
flex-flow: column;
align-items: stretch;
height: 300px;
}
header {
flex: 0 1 auto;
background: tomato;
}
div {
flex: 1 1 auto;
background: gold;
overflow: auto;
}
footer {
flex: 0 1 60px;
background: lightgreen;
/* fixes the footer: min-height: 60px; */
}
<section>
<header>
header: sized to content
<br>(but is it really?)
</header>
<div>
main content: fills remaining space<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- uncomment to see it break - ->
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- -->
</div>
<footer>
footer: fixed height in px
</footer>
</section>
小提琴:
http://jsfiddle.net/7yLFL/1/(工作,内容不多)
http://jsfiddle.net/7yLFL/(破碎,内容较大)
我很幸运,我可以使用最新最好的CSS,而不用考虑传统浏览器。我认为我可以使用flex布局,最终摆脱旧的基于表格的布局。出于某种原因,它没有做我想要的……
为了记录,在SO上有许多关于“填充剩余高度”的相关问题,但没有任何问题可以解决我使用flex时遇到的问题。参考文献:
用一个div填充剩余屏幕空间的高度
填充剩余的垂直空间-只有CSS
当与另一个div共享时,有一个div来填充容器的剩余高度/宽度?
使嵌套div伸展到剩余容器div高度的100%
如何使我的flexbox布局占100%垂直空间?
等