Html CSS表格单元格和溢出DIV

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

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

我在容器上应用了一个最大高度-所有子元素都具有容器的100%高度。在上面的例子中，

.content

需要在内容超过其父级的最大高度时可滚动

在Chrome中，这与预期的效果一样-一个滚动条显示在

.content

上。然而，在Firefox和IE中，表格单元格只是向下扩展——它似乎不尊重容器的最大高度设置

这里有一把小提琴来演示这个问题：（在Firefox和Chrome中试试这个）

---

顺便说一下，我无法更改网站的基本结构-因此它仍然需要使用显示表等。

请尝试将

.content

溢出设置为滚动

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

这在你的JSFIDLE上的Firefox中对我有效

---

另请参见下面的代码。。它适用于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>

html，正文{
身高：100%；
}
#容器{
显示：块；
宽度：500px；
最大高度：200px；
溢出：滚动；
}
#类别{
显示：表格；
身高：100%；
宽度：100%；
}
#划船{
显示：表格行；
}
#精炼{
显示：表格单元格；
身高：100%；
}
.内容{
浮动：左；
身高：100%；
宽度：100%；
}
.内容p{
浮动：左；
宽度：100%；
}
同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

Lorem iPsum
Lorem iPsum

Lorem iPsum
Lorem iPsum
Lorem iPsum
Lorem iPsum

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

Lorem iPsum
Lorem iPsum

Lorem iPsum
Lorem iPsum
Lorem iPsum
Lorem iPsum

同侧眼睑

我认为firefox与直接在另一个

display:table

中嵌套

display:table混为一谈。另外，我认为它希望溢出位于设置了最大高度的元素上。像这样：啊，这是可行的，除了我不能把它放在容器上，因为这意味着整个容器将是可滚动的，而不是内部分区。你能在内部分区上设置最大高度吗？我能。。但我希望它能自动继承，这样它就可以适用于任何屏幕大小。我可能遗漏了一些东西，但这与在容器上声明它有什么不同吗？我的意思是在屏幕大小方面，你希望高度是100%，最大高度是200px。在一个小设备上，哪种元素设置它会有区别吗@拉兹洛帕普-同意。我添加了一点。很抱歉，容器上不能有溢出滚动条。
<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>