Question

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

＆＃13;

private void ExecuteEntrarFacebook()
{
    Device.OpenUri(new Uri("fb://officialstackoverflow/11239244970"));
}

＆＃13;

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>

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

2 个答案: