html - 制作兄弟 div 以获取剩余高度？

Question

我有 3 个 div：

 <div class="a">

    <div class="b">
    </div>
    <div class="c">
    </div>

  </div>

当前的CSS：

.a
{
  height:300px;
  border:solid 2px red;
}

.b
{
  height:100px;
  border:solid 3px blue;
}
.c
{
  height:100%;
  border:dashed 3px gray;
}

红色的高度是通过 JS 确定的（当文档准备好时）。（它是一个弹出窗口 div，它的高度应该与用户屏幕大小成比例。）

blue 有一个固定的高度。（标题）

• 问题/问题：

是否有任何css方法可以使灰色div 高度占据剩余的可用高度（从红色高度）

所以它看起来像：

这是测试小提琴

注意：

浏览器支持：IE 8+

Answer 1

我总是想知道为什么用户会在第一个小时内接受答案......！？

绝对定位当然是一种选择，但通常存在元素不再处于正常流程中的缺点。

在您的情况下，还有另一种选择： display: table(-xyz);

您只需设置外部容器/包装器元素的宽度和高度 - 请参阅：

jsFiddle

...

Answer 2

演示

.a
{
  position: relative;
}

.b
{
  height:100px;
}
.c
{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
}