javascript - 如何设置最后一个内部 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 成为 wrapper 高度 的 100%，这意味着他将是 300px 而不是我正在寻找的 - 275px(在这种情况下，包装器为 300 像素，.header 为 25 像素)。
我可以通过使用 JS 代码设置 .frame 的高度属性来做到这一点，该代码将在文档准备好时动态计算和设置它，但是我想问一下是否有任何 CSS 属性以更优雅的方式执行相同的操作?

谢谢!

Answer 1

使用 CSS calc()

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

DEMO

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

jQuery 解决方案

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

DEMO