Javascript 垂直展开元素以填充父元素'；s剩余空间

鉴于此标记和样式：

<div class="a">
  <div class="b">Fixed height</div>
  <div class="b">Fixed height</div>
  <div class="expand">Expand</div>
  <div>Fixed height</div>
</div>

.a {
  float: left; width: 100%; height: 500px;
}
.a>div {
  float: left; width: 100%;
}
.b {
  width: 50%;
}

这样做是可行的，但工作案例是有限的

.expands

不能是内联元素，案例B需要不同的标记：

<div class="a">
      <div class="b">Fixed height</div>
      <div class="b">Fixed height</div>
      <div class="expand">
           <div class="b expand">Expand</div>
           <div class="b expand">Expand</div>
      </div>
      <div>Fixed height</div>
    </div>

固定高度
固定高度
扩大
扩大
固定高度

我留下这个问题是为了看看是否有更合适的解决办法

有什么简单的解决办法吗？或者有一个jQuery插件可以做到这一点？我找不到适合这种特殊情况的

尽管这里有类似的问题，但在这种情况下，我不能更改标记或使用

display:table

或CSS-flex，因为它会与其他元素混淆。我正在寻找一个JavaScript解决方案

这些样式被简化以显示一个易于阅读的示例。要澄清的图像，包括其他类似情况（左侧、初始状态、右侧预期结果）

这些都是例子。关键是要扩展，而不管还有什么其他元素或它们是如何排列的

---

您可以使用

偏移权

进行计算。这个提琴展示了如何制作页眉、页脚和中间容器

标题

另一行

容器
容器
var resize=function（）{
var windwow_height=window.innerHeight；
var footer_height=document.getElementById（'footer'）。offsetHeight；
var header_height=document.getElementById（'header'）。offsetHeight；
var container\u height=windwow\u height-（页眉高度+页脚高度）；
document.getElementById（'container'）。style.height=container_height+'px'；
}
window.onresize=调整大小；
调整大小（）；

谢谢，这是一个好主意，但重点是无论其他元素是什么或它们是如何排列的，都要进行扩展。

<div class="a">
      <div class="b">Fixed height</div>
      <div class="b">Fixed height</div>
      <div class="expand">
           <div class="b expand">Expand</div>
           <div class="b expand">Expand</div>
      </div>
      <div>Fixed height</div>
    </div>

<div id='header'>
  header
  <p>
    another line
  </p>
</div>
<div id='container'>
  container
</div>

<div id='footer'>
  container
</div>
var resize = function(){
  var windwow_height = window.innerHeight;
  var footer_height = document.getElementById('footer').offsetHeight;
  var header_height = document.getElementById('header').offsetHeight;
  var container_height = windwow_height - (header_height + footer_height);

  document.getElementById('container').style.height = container_height + 'px';
}

window.onresize = resize;
resize();