做个兄弟姐妹来取剩余的高度？

Question

我有3分钱：

 <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

演示

.a
{
  position: relative;
}

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

Answer 2

我一直在想，为什么用户在第一个小时内就会接受一个答案？

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

在您的例子中，还有另一个选项: display: table(-xyz)；

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

jsFiddle

...