使用display:flex用CSS填充剩余的垂直空间

在3行布局中：

• 顶行的大小应根据其内容而定
• 底行应具有固定的高度（以像素为单位）
• 中间一行应展开以填充容器

问题在于，随着主内容的扩展，它会挤压页眉和页脚行：

HTML:

&lt；第节&gt；
&lt；标题&gt；
标题：根据内容调整大小
&lt；br&gt；（但这是真的吗？）
&lt/标题&gt；
&lt；部门&gt；
主要内容：填充剩余空间&lt；br&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
&lt；！--取消注释以查看其中断---&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
&lt；！----&燃气轮机；
&lt/部门&gt；
&lt；页脚&gt；
页脚：px中的固定高度
&lt/页脚&gt；
&lt/第节&gt；

CSS:

部分{
显示器：flex；
柔性流动：柱；
对齐项目：拉伸；
高度：300px；
}
标题{
flex:01自动；
背景：番茄；
}
div{
flex:1自动；
背景：金；
溢出：自动；
}
页脚{
flex:01160px；
背景：浅绿色；
/*固定页脚：最小高度：60px*/
}

小提琴：

• http://jsfiddle.net/7yLFL/1/ （工作，内容小）
• http://jsfiddle.net/7yLFL/ （已损坏，内容更大）

我很幸运，我可以使用最新和最好的CSS，而不用考虑传统浏览器。我想我可以使用flex布局最终摆脱旧的基于表的布局。因为某些原因，它没有做我想做的

作为记录，关于“填充剩余高度”有很多相关的问题，但没有解决我在flex中遇到的问题。参考文献：

• 使div填充剩余屏幕空间的高度
• 填充剩余垂直空间-仅CSS
• 与另一个div共享时，是否有一个div来填写容器的剩余高度/宽度
• 使嵌套div拉伸到剩余容器div高度的100%
• 如何使flexbox布局占据100%的垂直空间
• 等

部分{
显示器：flex；
柔性流动：柱；
高度：300px；
}
标题{
背景：番茄；
/*没有弹性规则，它会增长*/
}
div{
flex:1；/*1，如果没有为其他子级设置flex值，它将填充剩余的全部空间*/
背景：金；
溢出：自动；
}
页脚{
背景：浅绿色；
最小高度：60px；/*最小高度有其目的：），除非您指的是高度*/
}

&lt；第节&gt；
&lt；标题&gt；
标题：根据内容调整大小
&lt；br/&gt；（但这是真的吗？）
&lt/标题&gt；
&lt；部门&gt；
主要内容：填充剩余空间&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
&lt；！--取消注释以查看其中断--&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
&lt；！----&燃气轮机；
&lt/部门&gt；
&lt；页脚&gt；
页脚：px中的固定高度
&lt/页脚&gt；
&lt/第节&gt

部分{
显示器：flex；
柔性流动：柱；
高度：100vh；
}
标题{
背景：番茄；
/*没有弹性规则，它会增长*/
}
div{
弹性：1；
/*1，如果没有为其他子项设置flex值，则它将填充剩余的全部空间*/
背景：金；
溢出：自动；
}
页脚{
背景：浅绿色；
最小高度：60px；
/*最小高度有它的目的：），除非你指的是高度*/
}
身体{
保证金：0；
}

&lt；第节&gt；
&lt；标题&gt；
标题：根据内容调整大小
&lt；br/&gt；（但这是真的吗？）
&lt/标题&gt；
&lt；部门&gt；
主要内容：填充剩余空间&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
&lt；！--取消注释以查看其中断--&gt；
x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x
&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；x&lt；br&gt；
&lt；！----&燃气轮机；
&lt/部门&gt；
&lt；页脚&gt；
页脚：px中的固定高度
&lt/页脚&gt；
&lt/第节&gt