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

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

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

.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，.header是25px）。
一种方法是使用JS代码设置.frame的height属性，该代码将在文档准备就绪时动态计算和设置它，但是我想问一下是否有任何CSS属性以更优雅的方式执行相同的操作？

---

谢谢

这里是一个解决方案的jsFiddle。答案是一个简单的CSS解决方案。只需更改

.frame

高度：100%至<代码>高度：自动

编辑：对不起，拨错了小提琴。现在开始：
使用CSS
calc（）

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

A
jQuery
Solution

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

这是错误的。您可以通过将背景颜色更改为除白色以外的任何颜色或使用开发工具（chrome）/firebug（ff）来检测它<代码>高度：自动

不提供剩余高度谢谢。正如你所说，这可能会导致兼容性问题（它在Chrome上对我有效，但在IE中不起作用），但是我会记住你的解决方案，并使用我的JS解决方案（与你的类似）作为后备方案。非常感谢！

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