显示表格行div以在FF中溢出“休息”

Question

我有一个堆叠的div布局，显示以display: table-row

实现的以下部分

• 标题
• 第1节
• 第2节
• 页脚

这些部分包含在display: table的包装div中。

第2节应该占用剩下的空间并在此部分内呈现它的内容。此部分中的溢出内容应该按溢出滚动。

这是一个Fiddle，它或多或少地显示它应该做什么，但它仅适用于Chrome。在IE11 / FF中，溢出不起作用，内容将页脚推出视口。

这是我的实施问题还是Chrome以外的浏览器中的一般问题？

Answer 1

添加边距-20px @data_section就可以了。我知道它的黑客行为，我最好的解释是css行为是由受人尊敬的浏览器引擎定义的。这适用于chrome和FF浏览器。

#data_section {
/*Section 2*/
position: relative;
background: red;
height: inherit;
overflow: auto;
margin-bottom: -20px;
}

Fiddle demo