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

Question

有人可以解释为什么在下面的示例中，Chrome 显示第二行内的滚动（这是我所期望的）而 Firefox 显示它在 table 之外。也就是说，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>

Answer 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>

Answer 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>

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

Overflow with div height 100% looks different in Chrome and Firefox

html

css

overflow