div 高度为 100% 的溢出在 Chrome 和 Firefox 中看起来不同答案

【问题标题】：Overflow with div height 100% looks different in Chrome and Firefoxdiv 高度为 100% 的溢出在 Chrome 和 Firefox 中看起来不同
【发布时间】：2017-11-24 11:14:45
【问题描述】：

有人可以解释为什么，在下面的示例中，Chrome 在第二行显示滚动（这是我所期望的）而 Firefox 将它显示在表格之外。换句话说，为什么 Firefox 不限制第二行的高度？我将如何在 Firefox 和 Chrome 中工作？谢谢！

<table style="width: 100%; height: 100%; border: 1px solid black;">
    <tr>
        <td style="border: 1px solid black;">
            <h1 id="titol">HELLO</h1>
        </td>
    </tr>
    <tr style="height: 100%;">
        <td style="border: 1px solid black;">
            <div style="height: 100%; overflow-y: auto;">
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
            </div>
        </td>
    </tr>
</table>

【问题讨论】：

您可能正在查看<tr style="height... 的不同错误处理。由于 tr 元素不应该具有高度，因此浏览器在处理它的方式上可能会有所不同。另外，height:100% 表示父级的高度；但在本例中，主体的高度没有明确设置。
我试着把但它也没有奏效。我想这就是你所说的高度。我终于明白了，但我不得不使用 javascript。

标签： html css overflow

【解决方案1】：

<html>
<head>
    <title>Hello</title>
</head>
<body onresize="setContentHeight()" style="margin: 0; padding: 0; overflow-y: hidden;">
    <div id="header">
        <h1>HELLO</h1>
    </div>
    <div id="content" style="margin: 0; padding: 0; overflow-y: auto;">
        FirstHello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>LastHello
    </div>
</body>
<script>
function setContentHeight() {
    document.getElementById("content").style.height = document.body.clientHeight - document.getElementById("content").offsetTop;
}
setContentHeight();
</script>
</html>

【讨论】：

【解决方案2】：

最后，我在没有 javascript 的情况下得到了它！

<html>
    <head>
        <title>
            Hello
        </title>
        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }

            #container {
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            #header {
                flex-grow: 0;
            }

            #content {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow-y: auto;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>HELLO</h1>
            </div>
            <div id="content">
                FirstHello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>LastHello
            </div>
        </div>
    </body>
</html>

【讨论】：