2

我试图获得一个布局，其中有两行的固定高度表，第一个缩放到其内容，第二个是剩余高度，并将其内容保留在其中。底部的高度需要是“真实的”（不被父母​​或任何东西剪裁），这样它可能会溢出：滚动或高度的孩子：100％等。

这应该是这样的：

图片说明，哟

我让它在 Chrome中工作，在相对表格单元中使用绝对定位的 div：

http://jsfiddle.net/9FPqx/

它的核心：

html:

<div class="row">
    <div class="cell">
        <div class="absolute-fill">
            Stuff
        </div>
    </div>
</div>

CSS：

.row
{
    display: table-row;
}

.cell
{
    display: table-cell;
    position: relative;
}

.absolute-fill
{
    position: absolute
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

使用表格单元格和内容之间的另一个中间相对 div（而不是在表格单元格本身上设置相对），它可以在 Firefox 中使用：

http://jsfiddle.net/sXHry/

它在 IE 中不起作用。我需要 IE >= 9。

似乎 IE 认为具有绝对子项的相对元素没有内容高度，因此将其设为 0 高度。

我觉得我很近，但很远。有没有办法只用 html 和 css 解决这个问题？我是否使用 display: table 走错了路？还是我应该放弃并扔一些javascript？

4

1 回答 1

2

为什么它需要是一张桌子？你不能让容器隐藏溢出吗？

html

<div class="container">
    <div class="top">
        Top, green area
    </div>
    <div class="bottom">
        Bottom, blue area
    </div>
</div>

css

.container {
    width: 250px;
    height: 162px;
    overflow: hidden;
    background: lightblue;
}
.top {
    background: lightgreen;
}

http://jsfiddle.net/sXHry/1/和http://jsfiddle.net/sXHry/2/（内容较少）

我怀疑我可能会遗漏一些东西，期待得到启发；）

于 2013-07-03T08:29:41.360 回答