Question

我在Firefox中遇到了表格单元格和带溢出自动的DIV的问题。这是我的标记：

<div id="container">
    <div id="category">
        <div id="row">
             <div id="refine">
                   <div class="content">
                        <!-- contains content -->
                   </div>
             </div>
        </div>
    </div>
</div>

CSS：

html, body {
   height: 100%;
}

#container {
    display: table;
    height: 100%;
    width: 500px;
    max-height: 200px;
}

#category { 
    display: table;
    height: 100%;
    width: 100%;
}

#row {
    display: table-row;
}

#refine {
    display: table-cell;
    height: 100%;
}

.content {
    float: left;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.content p {
    float: left;
    width: 100%;
}

我在容器上应用了最大高度 - 所有子元素都有100％的容器高度。在上文中，一旦内容超出其父级的最大高度，.content就需要可滚动。

在Chrome中按预期工作 - .content上会显示滚动条。但是在Firefox和IE中，表格单元格只是向下扩展 - 它似乎不尊重容器的最大高度设置。

以下是演示此问题的小提琴：http://jsfiddle.net/LpzEM/6/（在Firefox和Chrome中尝试此操作）。

顺便说一句，我无法改变网站的基本结构 - 所以它仍然需要使用显示表等。

Answer 1

尝试设置.content溢出以滚动。

.content {
    // ...
    overflow-y: scroll;
}

这适用于你在JSFiddle上的Firefox。

另见http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

尝试以下代码..它适用于chrome，firefox和最新的Internet Explorer。在旧的Internet Explorer中，它不支持某些css功能。

<style>
html, body {
   height: 100%;
}

#container {
display: block;
width: 500px;
max-height: 200px;
overflow: scroll;
}

#category { 
    display: table;
    height: 100%;
    width: 100%;
}

#row {
    display: table-row;
}

#refine {
    display: table-cell;
    height: 100%;
}

.content {
    float: left;
    height: 100%;
    width: 100%;
}

.content p {
    float: left;
    width: 100%;
}
</style>
<div id="container">
    <div id="category">
        <div id="row">
             <div id="refine">
                   <div class="content">
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                   </div>
             </div>
        </div>
    </div>
</div>

CSS表格单元格和溢出DIV

2 个答案: