Html 第二个内容div填充剩余高度，其中第一个内容div具有可变高度

我将此html页面结构用于不同的页面：

<div class="conteiner">
    <div class="header">green</div>
    <div class="fit_on_content">red<br />red</div>
    <div class="fit_all">aqua</div>
    <div class="footer">yellow</div>
</div>

.header

位于顶部。

.footer

位于底部。

.fit\u on\u content

位于页眉下方，内容的高度可能随页面的不同而变化。

.fit\u all

位于内容的fit\u下，必须延伸到页脚

有什么想法吗

---

谢谢

这里有一种方法可以使用

显示：table

html，
正文{高度：100%；边距：0}
.集装箱{
显示：表格；
宽度：100%；
身高：100%；
}
.第页行{
显示：表格行；
高度：1px；
}
.页行已展开{
身高：100%；
}
标题{
背景色：#bbb；
高度：50px；
}
主要{
背景色：#ddd；
}
main~main{
背景色：#fff；
}
页脚{
背景色：#bbb；
高度：50px；
}

标题
第一个内容在这里
第二个内容在这里
版权所有，诸如此类

检查一下我的一些旧答案，发现了这个。我能做些什么使它足够有用，至少能让它得到升级？显示解决方案flex？另一个复杂的问题是，当我修改html代码时，第一个解决方案适合chrome和firefox，但不适合ie11（窗口显示滚动条），第二个解决方案适合firefox，但不适合ie11（窗口显示滚动条）和chrome（iframe height为0）。有什么想法吗？感谢第一个解决方案不适用于ie11。似乎高度值=的100%是根据的高度计算的，而不是根据的高度计算的。如果在第一个解决方案中对iframe使用了

位置：绝对

，则需要在父级上设置

位置：相对

（本例中的“main”…..在这把小提琴中，IE11完美无瑕…（如果你在整页查看时看到一个卷轴，这是由jsfiddle引起的）@MAX_1999当一个答案是“问题的正确答案”时，你应该接受这个答案，向未来的用户显示哪个答案是发问者喜欢的。

.conteiner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: aquamarine;
}
.header {
    position: relative;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: green;
}
.fit_on_content {
    position: relative;
    display: table;
    margin: 0 auto;
    background-color: red;
}
.fit_all {
    background-color: aqua;
    ????
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: yellow;
}