嵌套在表格单元格中的div溢出问题(firefox)

时间:2015-03-13 08:42:11

标签: html css scroll overflow tablecell

THIS IS THE FIDDLE

HTML:

<input id="APP" type="button" value="Append"/>
<div id="wrapper">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 100%; height: 30px; background-color: rgb(230,230,230)">
            </td>
        </tr>
        <tr>
            <td style="height: 100%;" align="center">
                <div id="ContentWrapper">
                </div>
            </td>
        </tr>
    </table>
</div>

CSS:

#wrapper{
width: 80%;
height: 300px;
background-color: rgb(25,25,25);
}

#wrapper table{
width: 100%;
height: 100%;
}

#wrapper table td{
vertical-align: middle;
}

#ContentWrapper{
width: 98%;
height: 95%;
border: 1px solid blue;
color: rgb(255,255,255);
text-align: left;
overflow-y: auto;
}

jQuery的:

$("#APP").on("click",function(){
    $("#ContentWrapper").append("Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>");
});

如果您在Chrome或任何其他浏览器中对此进行测试,您会发现它可以正常运行。但是在Firefox中,如果你继续按下&#34;追加&#34;按钮,div的高度将随内容而变化,尽管div的溢出设置为auto

我知道如果我将div的维度设置为px而不是百分比,这会有效,但我不想这样做。我把这个小提琴作为一个例子来确定问题,但在我的原始代码中,保存表的包装器是响应式的,我必须保持维度的百分比。

1 个答案:

答案 0 :(得分:0)

有趣的发现。它有点像Firefox中的一个错误 但是,有一种解决方法:也为表中的tbody指定显式高度。

#wrapper table, #wrapper tbody {
    width: 100%; height:100%;
}

updated fiddle。请注意,我还更改了一些其他属性,因为浏览器被顶部td高30px高而底部高100%混淆。我把它改为10%和90%;您可能必须在您的情况下使用其他值。 (也许使用calc(...)作为其中之一。)