与DIV高度溢出100％的铬和Firefox看起来不同

有人可以解释为什么在下面的示例中，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>

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

最后，我没有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>

相关内容

最新更新

热门标签：