【发布时间】：2016-02-29 15:03:33
【问题描述】：
我正在做一个项目，我正在使用 display: table 和 table-row with overflow auto。但它在 Firefox（和 IE）中的行为与预期不同。
在 Chrome 中，它的行为应有尽有。
StackOverflow 上有this 的问题，看起来和我的问题很相似，但没有给出答案或示例。
我尝试在 JSbin 和 Fiddle 中重现此内容，但没有成功。
为了说明 Chrome 和 Firefox 中的行为，我制作了两个屏幕截图：
我还设置了一个小规模的 HTML 示例，可以在 here 找到。您可以通过在 Chrome 和 Firefox 中打开网站并展开 textarea 直到底部容器溢出页面来进行复制。
代码
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.tableWrapper {
display: table;
height: 100%;
background: darkgrey;
table-layout: fixed;
width: 800px;
margin: 0 auto;
}
.textArea {
background: #F9F9F9;
padding: 10px 10px 5px 10px;
margin: 10px;
}
.content {
display: table-row;
height: 100%;
margin: 10px;
}
.content div {
display: block;
overflow: auto;
height: calc(100% - 20px);
height: -webkit-calc(100% - 20px);
height: -moz-calc(100% - 20px);
background: #ADE6DF;
margin: 10px;
}
.content p {
background: white;
margin: 10px;
padding: 5px;
}<div class="tableWrapper">
<div class="textArea">
<textarea></textarea>
</div>
<div class="content">
<div>
<p>
Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
</p>
<p>
Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
</p>
</div>
</div>
</div>这很令人沮丧，我希望有人知道发生了什么。
【问题讨论】：
-
我不确定这是否与在各处生成匿名表格框以保持布局在一起的事实有关（.textArea 存在于匿名表格单元中在 .tableWrapper 的匿名表格行中，而 .content div 位于 .content 中的匿名表格单元格中。
-
@BoltClock 你知道如何解决这个问题吗？
-
@Patrick Hofman：不，很遗憾。
标签： html css google-chrome firefox