Question

我有：

<div style="position: absolute; width: 100%; height: 20%;">
    <table style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; table-layout: fixed;">
    ...
    </table>
</div>

在Firefox中，表格会延伸到div的底部。在Chrome中，它只会延伸到表格中最大高度内容的高度。谁知道为什么？

Answer 1

好吧，我想我终于弄明白了。

似乎当表格被赋予明确的高度时，它会以您在绝对定位的top: 0; bottom: 0;内设置<div>时所看到的方式展开以适合该高度。

进一步看来，当您使用绝对定位“技巧”来设置表格的高度时，Firefox和Opera会将其解释为您设置了明确的高度，即使您没有。 IE，Chrome和Safari没有做出相同的解释。

对此的修复是明确设置表的高度。在这种情况下，您希望它是<div>：

的整个高度

table {
  height: 100%;
}

顺便说一句，由于您明确设置了表格的高度，因此您不再需要使用绝对定位来拉伸它，因此您可以删除它以及top, bottom, left, and right属性。

CSS位置底部不会触底（仅限Chrome）

1 个答案: