在 3 行布局中:
- 顶行应根据其内容调整大小
- 底行应该有固定的像素高度
- 中间一行应该展开以填满容器
问题是随着主要内容的扩展,它挤压了页眉和页脚行:
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>
fiddle :
- http://jsfiddle.net/7yLFL/1/ (工作,内容不多)
- http://jsfiddle.net/7yLFL/ (已损坏,内容较多)
我很幸运,我可以使用最新最好的 CSS,而不考虑旧版浏览器。我想我可以使用 flex 布局来最终摆脱旧的基于表格的布局。出于某种原因,它没有按照我的意愿行事...
作为记录,SO 上有很多关于“填充剩余高度”的相关问题,但没有解决我在使用 flex 时遇到的问题。引用:
- 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
- How can I make my flexbox layout take 100% vertical space?
- 等等
最佳答案
简单点: 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*/
}
<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>
关于css - 使用 display :flex 用 CSS 填充剩余的垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25098042/