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

Question

使用display:table和display:table-rowCSS属性,我希望我的内容填充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%中不会导致在严格模式下无法在文档中呈现.所以通过更多的研究,我发现你可以让它在怪癖模式下工作,这里是一个测试html - 上面的代码,但是在怪癖模式文档中.谢谢你给我一个学习的理由,很高兴知道=)