CSS display:table 用于填充高度。 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 属性，您现在可以将其与表格的 padding 属性结合使用你想要的样子。

添加容器的样式将是这样的（第一个仍然基于您的样式，最后两个是附加的 - 内部的）：

#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% 不会在严格模式下呈现在文档中。因此，通过更多研究，我发现您可以让它在 quirks 模式 下工作，这里是 test html - 上面的代码，但在 quirks 模式文档中.感谢您给我一个学习的理由，很高兴知道 =)

Answer 2

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

问题是你在#content上设置的height:90% !important;。

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

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