0

下面有一个很简单的html文档，为什么在iOS上的Chrome浏览器底部会有很大的空白？这是一个演示页面：https ://watchfulfirebrickopengl.ksb1986.repl.co/

我试过使用100%而不是100vh但得到相同的结果。这不会发生在桌面上的 Safari 或 Chrome 或 iOS 上的 Safari 中。是什么原因造成的，如何避免？

（一点历史：2021 年的某个时候，我注意到这开始出现在许多网站（包括我的一些网站）的底部。我认为这可能是一个错误，很快就会随着下一次版本更新而消失。我们在这里在 2022 年，它仍然存在..）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            html,
            body {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
            main {
                background: lightblue;
                height: 100vh;
            }
        </style>
    </head>

    <body>
        <main>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
        </main>
    </body>
</html>

4

2 回答 2

0

您应该尝试从主元素中删除 height 属性，并在 css 的 body 选择器中将 vh 更改为百分比，代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            main {
                background: lightblue;
           
            }
        </style>
    </head>

    <body>
        <main>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
        </main>
    </body>
</html>

于 2022-01-31T06:06:11.360 回答
0

我的猜测是<main>标签上的边距，您可以尝试使用以下内容吗？

            html,
            body,
            main {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
            main {
                background: lightblue;
            }

或者，尝试使用绝对定位：

            html,
            body,
            main {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
于 2022-01-31T04:28:58.047 回答