如何在底部div渲染后获得顶部div来填充剩余高度？ （没有flexbox）

Question

在父容器中，每个上面有三个div。顶部div是固定高度。底部div的内容占用了未知数量的垂直空间，但需要显示其中的所有内容。顶部div应填充剩余的垂直空间。每

<div id="container"> // 100% of visible window height but should not overflow
   <div id="top"> // Fixed height
   </div>
   <div id="middle"> // Use remaining vertical space
   </div>
   <div id="bottom"> // Unknown height but contents should all be shown
   </div>
</div>

我需要支持最近的传统浏览器（例如IE9 +）和移动浏览器（例如Android 4.4+），因此基于flexbox的布局已经完成。我尝试使用Javascript（使用JQuery）来尝试设置

middle div height = container height - (top div height + bottom div height)

但由于某种原因，浏览器在页面渲染期间错误报告了底部div高度（Win 7上的最新Chrome），因此结果出错了。如果可能的话，我想避免使用JS（如果解决方案有效，我会打开）。

需要支持尽可能多的桌面和移动浏览器。 感谢

Answer 1

对于旧版浏览器，无法使用flex， display:table可以退回，但布局将能够超越窗口的高度太长了，不能马上展示。

CSS仅使用flex和table混合作为不支持flex的后备：https://codepen.io/gc-nomade/pen/BdWXpp

下面是仅使用display:table / table-row CSS的代码段（适用于几乎所有浏览器 （IE8和下一个）

＆＃13;

＆＃13;

html,
body,
#container {
  height: 100%;
  width: 100%;
  margin: 0;
  display: table;
  background: turquoise;
}

#container>div {
  display: table-row;
}

.buffer {
  display: table-cell;
  /* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/
  vertical-align: middle;
  text-align: center;
}

#top {
  background: orange;
  height: 100px;
}

#middle {
  height: 100%;
}

#bottom {
  background: tomato;
}

＆＃13;

<div id="container">
  <div id="top">
    <div class="buffer">top 100px, test me full page and in any medias
    </div>
  </div>
  <div id="middle">
    <div class="buffer">Use remaining vertical space
    </div>
  </div>
  <div id="bottom">
    <div class="buffer">Unknown height<br/> that fits <br/>to content to hold
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;