javascript - 渲染底部div后如何让顶部div填充剩余高度？ (没有 flex 盒子)

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 的代码 fragment (适用于几乎所有浏览器(IE8 及更高版本)

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;
}

<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>