使用display：flex填充剩余的垂直空间 [英] Fill remaining vertical space with CSS using display:flex
问题描述
在3行布局中：
- 顶行应根据其内容进行调整
- 底部一行应以像素为单位具有固定高度
- 中间一行应展开以填充容器
问题是，当主内容展开时，它会压缩页眉和页脚行：
HTML：
< section>
< header>
header：size to content
< br>（但是它真的吗？）
< / header>
< div>
主要内容：填充剩余空间< br>
x< br> x< br> x< br> x< br> x< br> x< br> x< br> x< br> x&
<！ - uncomment to see it break - - >
x< br> x< br> x< br> x< br> x< br> x< br> x< br> x< br> x&
x< br> x< br> x< br> x< br> x< br> x< br> x< br> x< br> x&
x< br> x< br> x< br> x< br> x< br> x< br> x< br> x< br> x&
x< br> x< br> x< br> x< br> x< br> x< br> x< br> x< br> x&
<！ - - >
< / div>
< footer>
footer：fixed height in px
< / footer>
< / section>
CSS：
节{
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;
/ *修复页脚：min-height：60px; * /
}
小提琴： b
$ b
- http://jsfiddle.net/ 7yLFL / 1 / （工作，内容较小）
- http ：//jsfiddle.net/7yLFL/ （破碎，内容较大）
我在幸运的情况我可以使用最新和最伟大的CSS，忽视旧版浏览器。我想我可以使用flex布局终于摆脱了旧的基于表的布局。出于某种原因，它不是我想要的...
对于记录，有很多相关问题关于填充剩余高度，但没有什么解决我使用flex的问题。参考：
- 制作div填充剩余屏幕空间
- 填充剩余垂直空间 - 仅CSS
- 在与另一个div共享时，是否有一个div来填充容器的剩余高度/宽度？
- 将嵌套的div展开为剩余容器div高度的100％
- 有CSS3 Flexbox布局采取100％垂直空间
- 等
柔性;
flex-flow：column;
height：300px;
}
header {
background：tomato;
/ *没有flex规则，它将增长* /
}
div {
flex：1; / * 1并且它将填充整个空间给其他孩子* /
背景：金;
overflow：auto;
}
footer {
background：lightgreen;
min-height：60px; / * min-height有它的目的:)，除非你的意思是高度* /
}
In a 3-row layout:
- the top row should be sized according to its contents
- the bottom row should have a fixed height in pixels
- the middle row should expand to fill the container
The problem is that as the main content expands, it squishes the header and footer rows:
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/ (working, with small content)
- http://jsfiddle.net/7yLFL/ (broken, with larger content)
I'm in the lucky situation that I can use the latest and greatest in CSS, disregarding legacy browsers. I thought I could use the flex layout to finally get rid of the old table-based layouts. For some reason, it's not doing what I want...
For the record, there are many related questions on SO about "filling the remaining height", but nothing that solves the problem I'm having with flex. Refs:
- Make a div fill the height of the remaining screen space
- Fill remaining vertical space - only CSS
- Have a div to fill out the remaining height/width of a container when sharing it with another div?
- Make nested div stretch to 100% of remaining container div height
- Have CSS3 Flexbox Layout Take 100% Vertical Space
- etc
Make it simple : DEMO
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*/
}
这篇关于使用display：flex填充剩余的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
