html - 在 Firefox 中，溢出滚动条未显示在 100% 高度 div 上

Question

我重现了我在 Chrome 和 Firefox 之间遇到的 CSS 兼容性问题。

在固定高度的“容器”DIV 内的表格单元格内具有 100% 高度的“内部”DIV。我希望内部 DIV 填充单元格并向其中动态添加文本，以便在它开始溢出时出现滚动条。

在 JSFiddle 中，您可以在 Chrome 和 Firefox 中看到代码。在 Chrome 中，它的行为符合预期，但在 Firefox 中，滚动条不显示，内部 DIV 一直超出容器 DIV 的高度。

JSFiddle code to try in both Chrome and Firefox

HTML如下:

<style>
#container {
  height:80px;
  width:100%;
  border:1px solid;
  overflow:hidden;
  resize:vertical;
}

#inner {
  height:100%;
  width:300px;
  border:2px solid red;
  overflow-y:auto;
}

table{
  height:100%;
}
</style>

<div id="container">
<table>
<tr>
  <td>
  <div id="inner">
    Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
  </div>
  </td>
  <td>
  <img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
  </td>
</tr>
</table>
</div>

编辑，进一步的要求:我忘了提到我在一个可调整大小的 DIV 中进行了此设置，即容器 DIV 能够调整其高度，以便表格和内部 DIV 相应地调整大小。

Answer 1

这是一个常见的错误。每当元素设置为 height: 100%或任何其他百分比，它与 height 有关它的 parent 。所以在使用它时，定义一个 height 很重要对于元素的父级:

演示问题:向父级添加一个类 <td class="fix">并添加一些 css 解决问题:

.fix {
  height: 80px;
  display: block;
}

WORKING JSFIDDLE DEMO

请记住，设置 display table-cell 中表格单元格的属性至 block是你应该避免的事情，因为你正在改变元素的根源。考虑不使用 <table> 的解决方案如果有可能，请标记。