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 中,如果你一直按“追加”按钮,尽管 div 的溢出设置为 auto
,但 div 的高度会随着内容的变化而变化。
我知道如果我将 div 的尺寸设置为 px 而不是百分比,这会起作用,但我不想这样做。我以那个 fiddle 为例来查明问题,但在我的原始代码中,包含表格的包装器是响应式的,我必须保持尺寸的百分比。
最佳答案
有趣的发现。这有点像 Firefox 中的错误。
但是,有一个解决方法:也为表中的 tbody 指定一个明确的高度。
#wrapper table, #wrapper tbody {
width: 100%; height:100%;
}
参见 updated fiddle .请注意,我还更改了一些其他属性,因为浏览器对顶部的 td 高 30 像素而底部的 100% 感到困惑。我将其更改为 10% 和 90%;您可能必须在您的情况下使用其他值。 (也许对其中之一使用 calc(...)。)
关于html - 嵌套在表格单元格中时出现 div 溢出问题 (firefox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29027966/