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