CSS显示：填充高度的表格。 Chrome / Safari与Firefox / Opera不同

Question

使用display:table和display:table-row CSS属性，我希望我的内容能够填充div的剩余可用高度。如果内容超出可用高度，我希望显示一个滚动条。

这是小提琴：http://jsfiddle.net/3HYJx/2/

Google Chrome和Safari中显示的行为是我正在尝试实现的行为。但是，Firefox和Opera以不同的方式显示它。尚未尝试IE，但担心最坏的情况。

为什么这种行为如此不同？甚至更好：如何在每个浏览器中实现我想要的功能（如Chrome中所示）？

提前多多感谢。

---

Chrome和Safari：

Firefox和Opera：

Answer 1

使用表格显示属性，你可以通过在滚动部分的文本周围再包含两个元素来克服firefox问题，所以你有三个：

• 外部的一个是table-row容器，填充表的其余部分
• 我们在其中有一个相对定位的容器，height和width设置为100%，并设置了垂直滚动overflow-y:scroll;
• 最内层容器绝对，height且width也设为100%

所以在这里我只是在你的内容段落中快速添加了两个div容器（根据你的需要，你可能会找到一组更合适的容器，但这样做可以用来说明）：

<div id="wrapper">
    <h2 id="date">Date</h2>
    <h1 id="title">A title ...</h1>
    <div id="contentbox-outer">
        <div id="contentbox-inner">
            <p id="content">The content ...</p>
        </div>
    </div>
</div>

您的整个CSS必须进行修改。您的原始选择器，稍作修改：

#wrapper {
    position:absolute;
    display: table;
    table-layout:fixed;
    background-color:black;
    padding:10px;
    width: 250px;
    height:350px;
    border-spacing:20px;
}

#date {
    display: table-row;
    font-weight: normal;
    font-size: 25px;
    background-color:yellow;
}

#title {
    display: table-row;
    font-weight: normal;
    font-size: 40px;
    line-height:90%;
    background-color:blue;
}

请注意，table-row和table元素现在采用表格特定样式，例如设置表格行间距的border-spacing属性，现在您可以将其与填充结合使用表所属外观的属性。

添加容器的样式将是这样的（首先仍然基于你的造型，后两个是额外的 - 内部的）：

#contentbox-outer {
    display: table-row;
    font-size: 12pt;
    width: 100%;
    height:90% !important;
    text-align: justify;
    background-color:red;
    overflow-y: scroll;
}
#contentbox-inner {
    position:relative;
    height:100%;
    width:100%;
    overflow-y:scroll;
}
#content {
    position:absolute;
    height:100%;
    width:100%
}

我还更新了你的小提琴，以便快速检查： http://jsfiddle.net/3HYJx/7/

修改：此功能适用于Firefox，Chrome，Safari等浏览器，但不会在Opera中导致height: 100%在严格模式下无法在文档中呈现。所以通过更多的研究，我发现你可以让它以怪癖模式工作，这里是一个 test html - 上面的代码，但是在怪癖中模式文件。感谢您给我一个理解这一点的理由，很高兴知道=）

Answer 2

工作小提琴： http://jsfiddle.net/3HYJx/3/

问题是height:90% !important;已设置#content。

您在#wrapper，#date和#title上设置了固定的高度。

如果你在#content上设置一个固定的高度（因为你有其他一切都有固定高度，所以这不会有问题）你也会在FireFox中得到预期的结果。