如何设置最后一个内部div以使用CSS填充其余包装高度？

Question

我想创建一个包含2个内部div的包装div，以便该包装和第一个内部div具有固定的高度，第二个内部div将填充其余的包装高度。
我做了这样的事情：

<div class="frameArea">
   <div class="header"></div>
   <div class="frame"></div>
</div>

我的CSS文件如下所示：

.frameArea {
   width: 200px;
   height: 300px;
   border: 2px solid black;
}
.frameArea .header {
   background-color: green;
   width: 100%;
   height: 25px;
   font-size: 18px;
   line-height: 25px;
}
.frameArea .frame {
   background-color: white;
   width: 100%;
   height: 100%;
}

事实是，使用此CSS使.frame div为包装器高度的 100％，这意味着他将为300px而不是我要的值-275px（在这种情况下，包装器为300px且。标头为25像素）。
我可以通过使用JS代码设置.frame的height属性来实现此目的的一种方法，该JS代码将在文档准备就绪时动态地计算和设置它，但是我想问一问是否有CSS属性以更优雅的方式执行相同的操作？

谢谢！

Answer 1

这是带有解决方案的jsFiddle。 答案是一个简单的CSS解决方案。 只需更改.frame height: 100%; 达到height: auto; 。

编辑：对不起，错误的小提琴。 在这里，您可以： http : //jsfiddle.net/shaansingh/UX6XQ/1/embedded/result/

Answer 2

使用CSS calc()

.frameArea .frame {
    ...
    height: calc(100% - 25px);
}

演示

calc()与较旧的浏览器不兼容，因此可能会给您带来兼容性问题，为解决这个问题，我建议您使用JavaScript解决方案。

jQuery解决方案

var h = $('div.frameArea').height() - 25;
$('div.frame').height(h);

演示