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

我正在尝试实现灵活的布局，就像我所附的图片一样

它是固定高度的模态窗口。页眉高度不能固定，可以在窗口调整大小过程中自动更改，例如，在这种情况下，应重新计算内容区域高度，以便模式窗口应保存相同的高度

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

我试图用javascript解决这个问题。这是我所做的一个示例（伪代码）：

window.resize（（）={if（checkHeaderHeight（）>75px）recreacteContentHeight（）；}）

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

例如，我的模式窗口必须具有所有可用的视口空间。对于固定高度的收割台有一个解决方案：

高度：75px

对于收割台和

高度：calc（100vh-75px）；溢出y：自动用于内容区域。
我将尝试回答：）您可以在窗口调整大小事件中设置高度



标题

另一行

容器
函数resize（）{
var windwow_height=window.innerHeight；
var header_height=document.getElementById（'header'）。offsetHeight；
var容器高度=windwow高度-收割台高度；
document.getElementById（'container'）。style.height=container_height+'px'；
document.getElementById（'container'）.style.maxHeight=容器高度+px；
}
window.onresize=调整大小；
document.addEventListener（'DOMContentLoaded'，调整大小）；
#容器{
背景：aliceblue；
溢出y：滚动；
}
这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的细节。希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些额外的研究，要么通过谷歌，要么通过搜索，尝试一下。如果您仍然有问题，请返回代码并解释您尝试了什么以及为什么不起作用。如果您不希望页眉具有高度，请不要为其指定高度。只要有文本，它就会根据浏览器宽度展开和收缩。很难理解你想要实现什么。除了思考flexbox之外，还向我们展示了您所做的工作。实际上，我没有任何附加代码的解决方案。我已经添加了两种方法，我想。我需要有两个子容器的固定高度的容器-标题和内容。它们应该占据父容器中所有可用的垂直空间。内容区域具有“overflow-y:auto”属性，可以具有垂直滚动条并包含大量内容。收割台区域应具有灵活的高度。我更新了我的问题。是的，它是：）这对我来说是一个很好的解决方案（我没有任何其他解决方案）。但也许你知道没有js如何实现这个结果吗？哦，没有js，不。你不能这样做，我不认为你有一个动态的标题。为什么你不能使用JS？我可以，但我看到了一些问题-在你的例子中尝试添加更长的文本行，然后调整窗口大小-你会看到当重新计算发生时滚动条是如何出现的好吧，必须有一个滚动条，否则你将无法看到内容…我的意思是滚动条出现和消失（在0.5s内）即使内容区域中没有内容，看起来也像一个bug。但是，实际上这并不重要。无论如何，谢谢！
<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>