2

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

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

Google Chrome 和 Safari 中显示的行为是我想要实现的行为。但是，Firefox 和 Opera 的显示方式不同。还没试过IE，但担心最坏的情况。

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

提前非常感谢。

铬和 Safari：
Chrome/Safari 示例

火狐和歌剧：
Firefox/Opera 示例

4

2 回答 2

6

使用表格显示属性，您可以通过在滚动部分的文本周围再包裹两个元素来克服 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-rowandtable元素现在采用表格的特定样式，例如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 模式下工作，这是一个测试 html - 上面的代码，但在 quirks 模式文档中。感谢您给我一个学习的理由，很高兴知道=）

于 2013-04-13T12:54:03.473 回答
1

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

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

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

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

于 2013-04-13T00:48:46.170 回答