CSS 显示 :table for filling height. 在 Chrome/Safari 与 Firefox/Opera 中不同

Question

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

这是 fiddle :http://jsfiddle.net/3HYJx/2/

谷歌浏览器和 Safari 中显示的行为是我试图实现的行为。然而，Firefox 和 Opera 显示不同。还没有尝试过 IE，但担心最坏的情况。

为什么这种行为如此不同？更好的是:如何在每个浏览器中实现我想要的(如 Chrome 中所示)？

非常感谢。

---

Chrome 和 Safari:

Firefox 和 Opera:

Answer 1

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

• 最外面的是一个table-row容器，用来填充表格的其余部分
• 在其中我们有一个相对定位的容器，其高度和宽度设置为100%，并且设置垂直滚动overflow-y:scroll;
• 最里面的容器是absolutely，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%
}

我还更新了您的 fiddle 以便快速检查: http://jsfiddle.net/3HYJx/7/

编辑: 这适用于 Firefox、Chrome、Safari 等浏览器，但例如不适用于 Opera，因为 height: 100% 在严格模式下不会在文档中呈现.所以通过更多的研究，我发现你可以让它在怪癖模式下工作，这里是一个 test html - 上面的代码但是在一个 quirks 模式文档中。谢谢你给我一个学习的理由，很高兴知道 =)