0


我想创建一个包含 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 属性来做到这一点，该代码将在文档准备好时动态计算和设置它，但是我想问一下是否有任何 CSS 属性以更优雅的方式做同样的事情?

谢谢！

4

2 回答 2

0

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

编辑：对不起，错误的小提琴。给你：http: //jsfiddle.net/shaansingh/UX6XQ/1/embedded/result/

于 2013-07-20T14:34:58.080 回答
0

使用 CSScalc()

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

演示

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

解决jQuery方案

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

演示

于 2013-07-20T14:41:49.443 回答