css - 使元素“填充”可用高度

Question

我正在制作一个类似的窗口position:absolute;。

正如在 jsbin 上看到的，“窗口”有一个标题栏及其内容：

<div class="l">
<div class="t">
<h4>Title</h4>
</div>
<div class="x">
    <!--contents-->
</div>
</div>

我的风格如下：

div.l{position:absolute;background:#aaf;width:70%;height:200px;padding:1em;}
div.t{padding:1px;background:#af9;}
div.x{padding:1em;background:#a87;height:100%;overflow:auto;}

我遇到的问题是让 divx占用所有可用空间并overflow:auto;进入可滚动区域。

由于 divl有一个确定的大小，我可以应用overflow:auto;它并有一个可滚动的区域，但整个标题、div.t、 也可以滚动，请参见此处。

---

我需要 divx来填充剩余空间，直到底部1em填充，以便我可以使用overflow:auto;它。

有没有办法做到这一点而不做div.x绝对定位？或者至少不知道高度div.t？

Answer 1

我认为现在很清楚答案是否定的，不可能div.x填补剩余的高度。

也许 CSS3 flexbox 可以做到这一点，但是当我问它时，这超出了问题的范围，并且可能属于一个单独的问题。

Answer 2

我认为这只有在你设置高度时才有可能div.t。这是一个示例：http: //jsfiddle.net/gmncc/