做一个sibling 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高度占用剩余的可用高度（来自红色）

所以它看起来像：

here is the test fiddle

注意：

浏览器支持：IE 8 +

Answer 1

Demo

.a
{
  position: relative;
}

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

Answer 2

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

绝对定位肯定是一种选择，但通常有一个缺点，即元素不再处于正常流程中。

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

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

jsFiddle

...