在三行布局中:
顶部行应该根据其内容调整大小
底部一行应该有一个固定的像素高度
中间的行应该扩展以填满容器
问题是，当主要内容展开时，它会压缩页眉和页脚行:
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%垂直空间?
等
简单点:演示
section {
display: flex;
flex-flow: column;
height: 300px;
}
header {
background: tomato;
/* no flex rules, it will grow */
}
div {
flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/
background: gold;
overflow: auto;
}
footer {
background: lightgreen;
min-height: 60px; /* min-height has its purpose :) , unless you meant height*/
}
<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>
全屏版本
section {
display: flex;
flex-flow: column;
height: 100vh;
}
header {
background: tomato;
/* no flex rules, it will grow */
}
div {
flex: 1;
/* 1 and it will fill whole space left if no flex value are set to other children*/
background: gold;
overflow: auto;
}
footer {
background: lightgreen;
min-height: 60px;
/* min-height has its purpose :) , unless you meant height*/
}
body {
margin: 0;
}
<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>
简单点:演示
section {
display: flex;
flex-flow: column;
height: 300px;
}
header {
background: tomato;
/* no flex rules, it will grow */
}
div {
flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/
background: gold;
overflow: auto;
}
footer {
background: lightgreen;
min-height: 60px; /* min-height has its purpose :) , unless you meant height*/
}
<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>
全屏版本
section {
display: flex;
flex-flow: column;
height: 100vh;
}
header {
background: tomato;
/* no flex rules, it will grow */
}
div {
flex: 1;
/* 1 and it will fill whole space left if no flex value are set to other children*/
background: gold;
overflow: auto;
}
footer {
background: lightgreen;
min-height: 60px;
/* min-height has its purpose :) , unless you meant height*/
}
body {
margin: 0;
}
<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>
下面是演示解决方案的代码:
演示-使用display:flex用CSS填充剩余的垂直空间
重要的亮点:
all containers from html, body, ... .container, should have the height set to 100%
introducing flex to ANY of the flex items will trigger calculation of the items sizes based on flex distribution:
if only one cell is set to flex, for example: flex: 1 then this flex item will occupy the remaining of the space
if there are more than one with the flex property, the calculation will be more complicated. For example, if the item 1 is set to flex: 1 and the item 2 is se to flex: 2 then the item 2 will take twice more of the remaining space
NOT TRUE: the item 2 will be twice larger than the item 1
check more about the concept of the remaining space: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Main Size Property
depends on the value of the flex-direction property
in our case height is just a preferred size
it will be overwritten in the presence of flex property: https://www.w3.org/TR/css-flexbox-1/#propdef-flex
When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box
min-* and max-* will be respected
