如何設置最后一個內部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);

演示