在具有巨大 innerhtml 值的 FF 中，溢出自动/滚动无法正常工作答案

【问题标题】：Overflow auto/scroll doesn't work correctly in FF with huge innerhtml value在具有巨大 innerhtml 值的 FF 中，溢出自动/滚动无法正常工作
【发布时间】：2010-10-18 20:33:28
【问题描述】：

这在 30 行上按预期工作，但在插入后增加了超过 50% 的块高度，例如100 行。谁能解释会发生什么？我只在 FF 中注意到了这个错误。

<!DOCTYPE html>
<html style="height:100%;">
<head>
    <title></title>
</head>
<body style="height:100%;background:grey;padding:0;margin:0;">
    <table style="height:100%;">
        <tr>
            <td style="height:100%;">
                <div style="background:white;height:50%; overflow: auto">
                    <script>
                        // try 100 to see a bug 
                        for (i = 0; i <= 30; i++) {
                            document.write(i + " Sample text<br>");
                        }
                    </script>
                </div>
                <div style="background:blue; height:50%">
                Sample text
                </div>  
            </td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

你为什么在这里使用表格？省略的结果会不会完全一样？
在这种情况下表格看起来完全没用，您是否尝试过删除它会发生什么？如果您手动将溢出设置为“滚动”会发生什么？
@elusive 不会。但我需要在我的页面上使用表格。我只是简化了
那么tbody和tr的高度呢？这些在这里没有定义。百分比值总是有点棘手。
@elusive 将 tbody 高度设置为 100% 解决了这个问题。多谢！如果你愿意，你可以写一个我会接受的答案。

标签： html css firefox

【解决方案1】：

记录一下：将tbody 的高度设置为 100% 应该可以解决这个问题。使用百分比值时要小心，因为它们有时真的很棘手。

【讨论】：

【解决方案2】：

我的测试表明，添加 tbody with height: 100%;将解决问题。

【讨论】：

elusive 在 10 个 10 mitunes 差异中排名第一，但感谢 bazmegakapa 顺便关注我的问题。