在3行布局中:
-
顶行应根据其内容确定大小
-
底行应具有固定的高度(以像素为单位)
-
中间行应该展开以填充容器
问题是,当主要内容扩展时,它会删除页眉和页脚行:
HTML:
<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>
CSS:
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; */
}
Fiddle:
-
http://jsfiddle.net/7yLFL/1/(工作,内容很少)
-
http://jsfiddle.net/7yLFL/(破碎,内容较大)
我很幸运,我可以使用CSS中最新最好的,无视旧版浏览器 . 我以为我可以使用flex布局来最终摆脱旧的基于表格的布局 . 出于某种原因,它没有做我想要的......
为了记录,关于“填充剩余高度”的SO有很多相关的问题,但没有解决我正在使用flex的问题 . 参考文献:
3 回答
简单说明: DEMO
如果展开的中心组件的内容超出其边界,则下面的示例包括滚动行为 . 此外,中心组件占据视口中剩余空间的100% .
jsfiddle here
可用于演示此行为的html示例
更现代的方法是使用网格属性 .