如何在没有flexbox的情况下实现这种灵活的布局

Question

我正在尝试在我附加的图像上实现灵活的布局。

它是具有固定高度的模态窗口。标题高度无法修复，并且可以在窗口调整大小过程中自动更改，例如在这种情况下，应重新计算内容区域的高度，因此模态窗口应保存相同的高度。

由于IE9支持原因，我无法使用flexbox。 有人可以告诉我，我该如何实现这样的布局？

我尝试使用javascript解决此问题。这是我做的一个例子（伪代码）：

window.resize(() = { if (checkHeaderHeight() > 75px) recalculateContentheight(); })

此外，我尝试使用表格，但我无法获得任何可接受的解决方案来附加我的代码。

例如，我的模态窗口必须具有所有可用的视口空间。标题有一个固定高度的解决方案：标题为height: 75px，内容区为height: calc(100vh - 75px); overflow-y: auto;。

Answer 1

我将尝试回答:)你可以设置窗口调整大小事件的高度

https://jsfiddle.net/stevenkaspar/11ayLL01/

<div id='header'>
  header
  <p>
    another line
  </p>
</div>
<div id='container'>
  container
</div>
<script>
function resize(){
  var windwow_height = window.innerHeight;
  var header_height = document.getElementById('header').offsetHeight;
  var container_height = windwow_height - header_height;

  document.getElementById('container').style.height = container_height + 'px';
  document.getElementById('container').style.maxHeight = container_height + 'px';
}
window.onresize = resize; 
document.addEventListener('DOMContentLoaded', resize);

<script>
<style>
#container {
  background: aliceblue;
  overflow-y: scroll;
}
</style>