在 3 行布局中：
顶行应根据其内容调整大小
底行应该有一个固定的像素高度
中间行应该扩大以填满容器
问题是随着主要内容的扩展，它会挤压页眉和页脚行：
https://i.stack.imgur.com/Xwer8.png
部分{显示：弹性；弹性流：列；对齐项目：拉伸；高度：300px； } 标题 { 弹性：0 1 自动；背景：番茄； } div { 弹性：1 1 自动；背景：金色；溢出：自动； } 页脚 { 弹性：0 1 60px;背景：浅绿色； /* 修复页脚：min-height: 60px; */ }
（但真的如此吗？）
x
x
x< br>x
x
x
x
x
x
x
小提琴：
http://jsfiddle.net/7yLFL/1/（工作，内容少）
http://jsfiddle.net/7yLFL/（坏了，内容较大）
我很幸运，可以使用最新最好的 CSS，而无需考虑旧版浏览器。我想我可以使用 flex 布局最终摆脱旧的基于表格的布局。由于某种原因，它没有做我想要的......
作为记录，SO上有很多关于“填充剩余高度”的相关问题，但没有解决我在flex中遇到的问题。参考：
使一个 div 填充剩余屏幕空间的高度
填充剩余的垂直空间 - 仅 CSS
与另一个 div 共享容器时，是否有一个 div 来填充容器的剩余高度/宽度？
使嵌套 div 拉伸到剩余容器 div 高度的 100%
如何让我的 flexbox 布局占据 100% 的垂直空间？
ETC
让它变得简单：DEMO
部分{显示：弹性；弹性流：列；高度：300px； } 标题 { 背景：番茄； /* 没有弹性规则，它会增长 */ } div { flex: 1; /* 1 如果没有为其他孩子设置 flex 值，它将填充整个空间*/ background: gold;溢出：自动； } 页脚 { 背景：浅绿色；最小高度：60px； /* min-height 有它的用途 :) ，除非你的意思是 height*/ }
（但真的是这样吗？）
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x< br>x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x< br>
全屏版
部分{显示：弹性；弹性流：列；高度：100vh； } 标题 { 背景：番茄； /* 没有弹性规则，它会增长 */ } div { flex: 1; /* 1 如果没有为其他孩子设置 flex 值，它将填充整个空间*/ background: gold;溢出：自动； } 页脚 { 背景：浅绿色；最小高度：60px； /* min-height 有它的用途 :) ，除非你的意思是 height*/ } body { margin: 0; }
（但真的如此吗？）
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
如果扩展的中心组件的内容超出其边界，则下面的示例包括滚动行为。此外，中心组件占用视口中 100% 的剩余空间。
html, body, .r_flex_container{
height: 100%;
display: flex;
flex-direction: column;
background: red;
margin: 0;
}
.r_flex_container {
display:flex;
flex-flow: column nowrap;
background-color:blue;
}
.r_flex_fixed_child {
flex:none;
background-color:black;
color:white;
}
.r_flex_expand_child {
flex:auto;
background-color:yellow;
overflow-y:scroll;
}
可用于演示此行为的 html 示例
<html>
<body>
<div class="r_flex_container">
<div class="r_flex_fixed_child">
<p> This is the fixed 'header' child of the flex container </p>
</div>
<div class="r_flex_expand_child">
<article>this child container expands to use all of the space given to it - but could be shared with other expanding childs in which case they would get equal space after the fixed container space is allocated.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</article>
</div>
<div class="r_flex_fixed_child">
this is the fixed footer child of the flex container
asdfadsf
<p> another line</p>
</div>
</div>
</body>
</html>
更现代的方法是使用网格属性。
部分{显示：网格；对齐项目：拉伸；高度：300px；网格模板行：最小内容自动 60 像素； } 标题 { 背景：番茄； } div { 背景：黄金；溢出：自动； } 页脚 { 背景：浅绿色； }
（但真的如此吗？）
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x< br>x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x< br>x
x
x
x
x
将 flex-grow 属性用于主要内容 div，并将 display: flex; 赋予其父级；
身体{身高：100%；位置：绝对；边距：0； } 部分 { 高度：100%;显示：弯曲；弹性方向：列； } 标题 { 背景：番茄； } div { 弹性：1; /* 或 flex-grow: 1 */;溢出-x：自动；背景：金色； } 页脚 { 背景：浅绿色；最小高度：60px； }
（但真的如此吗？）
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x< br> x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
position: absolute，还有没有其他解决方案（其中 section 高度不固定？）？
position: absolute; 。 https://jsfiddle.net/xa26brzf/
这是我能想到的最简单的例子。关键是
父母是 display:flex 孩子有 flex-grow:1 父母必须有指定的高度。如果您在父 div 上指定 height:100%，请记住，父 div 存在于
中，除非您也在 body 上添加 height:100%，否则您会看到 body 不是 100%。http://jsfiddle.net/Ljbzsmvf/2/
div#parent { 高度：300px;显示：弯曲；弹性方向：列； } div#child { 边框：细实心红色；弹性增长：1； }
这是显示解决方案的 codepen 演示：
演示 - 使用 display:flex 用 CSS 填充剩余的垂直空间
重要亮点：
来自 html、body、... .container 的所有容器都应将高度设置为 100%
将 flex 引入任何 flex 项目将触发基于 flex 分布的项目大小计算：如果只有一个单元格设置为 flex，例如： flex: 1 那么如果有更多，则此 flex 项目将占用剩余空间比有 flex 属性的，计算会更复杂。例如，如果项目 1 设置为 flex: 1 并且项目 2 设置为 flex: 2 那么项目 2 将占用剩余空间的两倍 不正确：项目 2 将比项目 1 大两倍 检查更多关于剩余空间的概念：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
如果只有一个单元格设置为 flex，例如：flex: 1 那么这个 flex item 将占据剩余的空间
如果有多个 flex 属性，计算会比较复杂。例如，如果项目 1 设置为 flex: 1 并且项目 2 设置为 flex: 2 那么项目 2 将占用剩余空间的两倍 不正确：项目 2 将比项目 1 大两倍 检查更多关于剩余空间的概念：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
不正确：项目 2 将比项目 1 大两倍
查看更多关于剩余空间的概念：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Main Size 属性取决于 flex-direction 属性的值，在我们的例子中 height 只是一个首选大小，它将在 flex 属性存在时被覆盖：https://www.w3.org/TR/css-flexbox-1 /#propdef-flex 当一个盒子是一个弹性项目时，会参考 flex 而不是主尺寸属性来确定盒子的主要尺寸 min-* 和 max-* 将被尊重
取决于 flex-direction 属性的值
在我们的例子中，高度只是一个首选尺寸
如果存在 flex 属性，它将被覆盖：https://www.w3.org/TR/css-flexbox-1/#propdef-flex 当一个盒子是一个 flex 项目时，会参考 flex 而不是主要的 size 属性确定盒子的主要尺寸
当 box 是 flex item 时，会参考 flex 而不是 main size 属性来确定 box 的主要尺寸
min-* 和 max-* 将被尊重
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
flex: 1更改为flex-grow: 1来纠正它。感谢您的解决方案！