使元素“填充”可用高度

Question

我正在创建一个position:absolute;的窗口。

如here on jsbin所示，'window'有一个标题栏及其内容：

<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;}

我遇到的问题是让div x占用所有可用空间，overflow:auto;占用可滚动区域。

由于div l具有明确的大小，我可以将overflow:auto;应用于它并具有可滚动区域，但整个标题div.t也会滚动seen here。

---

我需要div x来填充余下的空格，直到底部1em填充，以便我可以使用overflow:auto;。

在没有div.x绝对定位的情况下，有没有这样做？或者至少不知道div.t的高度？

Answer 1

我认为只有设置div.t的高度才能实现这一点。以下是一个示例：http://jsfiddle.net/gmncc/

Answer 2

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

也许CSS3 flexbox可以实现这一点，但当我提出这个问题时，这超出了问题的范围，可能属于另一个问题。