Question

我重新创建了Chrome和Firefox之间遇到的CSS兼容性问题。

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

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

HTML如下：

page-break-inside:avoid; page-break-after:auto

编辑，进一步的要求：我忘了提到我在可调整大小的DIV中有这个设置，即Container DIV能够调整它的高度，以便表和内部DIV相应地调整大小。

Answer 1


    #inner {
      border: 2px solid red;
      height: 75px;
      overflow: auto;
      width: 300px;
    }

您可以使用此CSS。我认为它可能工作正常。

Answer 2

这是一个常见的错误。每当元素设置为height: 100%或任何其他百分比时，它都与其父元素的height相关。因此，在使用此功能时，为元素的父级定义height非常重要：

要演示此问题：向父<td class="fix">添加一个类并添加一些css可以解决问题：

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

请注意，将表格单元格的display属性从table-cell设置为block是您应该避免的，因为您要更改元素根。如果您有可能，请考虑不使用<table>标记的解决方案。