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

Using the display:table and display:table-row CSS attributes, I want my content to fill the remaining available height of a div. In case the content exceeds the available height, I want a scrollbar to be shown.

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

Here's the fiddle: http://jsfiddle.net/3HYJx/2/

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

The behaviour as shown in Google Chrome and Safari is the one I'm trying to achieve. However, Firefox and Opera show it differently. Haven't tried IE yet, but fearing the worst.

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

Why is this behaviour so different? And even better: how can I achieve what I want (as shown in Chrome) in every browser?

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

Thanks a lot in advance.

非常感谢提前。

Chrome and Safari:

Chrome和Safari:

Firefox and Opera:

Firefox和Opera:

2 个解决方案

#1

Using the table display properties, you could overcome the firefox problem by wrapping two more elements around the text of the scrolling section, so you have three:

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

the outer one is a table-row container that fills the rest of the table

外面的一个是一个表行容器,填充表的其余部分

inside which we have a relatively positioned container with height and width set to 100%, and with set vertical scrolling overflow-y:scroll;

在其中我们有一个相对定位的容器,其高度和宽度设置为100%,并设置垂直滚动溢出-y:滚动;

the innermost container is absolutely with height and width also set to 100%

最里面的容器绝对高度和宽度也设置为100%

So here I just quickly added two div containers around your content paragraph (you could probably found a more appropriate set of containers according to your needs, but this will do for the illustration):

所以在这里我只是快速地在你的内容段落中添加了两个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>

And your whole CSS has to be modified. Your original selectors, with slight modifications:

并且您的整个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;
}

note that the table-row and table elements take now speciffinc styling for tables, like the border-spacing property that sets spacing between the table rows, and this you can now combine with the padding property of the table for the appearance you want.

请注意,表格行和表格元素现在采用表格的特定样式,例如设置表格行间距的border-spacing属性,现在您可以将表格的padding属性与所需的外观相结合。

And the styling for the added containers would be something like this (first is still based on your styling, the last two are the additional - inner ones):

添加容器的样式将是这样的(首先仍然基于你的样式,最后两个是额外的 - 内部的):

#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%
}

I also updated your fiddle for a quick check: http://jsfiddle.net/3HYJx/7/

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

Edit: This works in browsers like Firefox, Chrome, Safari, but for example not in Opera cause height: 100% does not get rendered in documents in strict mode. So with a little more research I found out that you can get it to work in quirks mode, here is a test html - the above code but in a quirks mode document. Thanks for giving me a reason to learn that, it's good to know =)

编辑:这适用于Firefox,Chrome,Safari等浏览器,但不是在Opera中导致高度:100%不会在严格模式下呈现在文档中。所以通过更多的研究,我发现你可以让它在怪癖模式下工作,这里是一个测试html - 上面的代码但是在怪癖模式文档中。感谢您给我一个理解这一点的理由,很高兴知道=)

#2

Working fiddle: http://jsfiddle.net/3HYJx/3/

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

The problem is height:90% !important; you have set on #content.

问题是身高:90%!重要;你已经设置了#content。

You have fixed heights set on #wrapper, #date and #title.

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

If you set a fixed height on #content (since you have everything else with fixed height, so this won't be a problem) you will get the expected result in FireFox too.

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

#1