iOS上的Chrome：HTML文档底部的大空间

ejk8hzay 于 2023-06-07 发布在 iOS

关注(0)|答案(2)|浏览(151)

下面有一个非常简单的html文档，为什么在iOS上的Chrome浏览器中查看时，底部会有一个很大的空白？下面是一个demo页面：https://watchfulfirebrickopengl.ksb1986.repl.co/
我尝试使用100%代替100vh，但得到的结果相同。这不会发生在Safari或Chrome在桌面或Safari在iOS上。是什么导致了这种情况，如何避免？
（一个小故事：在2021年的某个时候，我注意到这个开始出现在许多网站（包括我的一些网站）的底部。我想这可能是一个bug，很快就会随着下一个版本更新而消失。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>

ios

来源：https://stackoverflow.com/questions/70920548/chrome-on-ios-large-space-at-bottom-of-html-document

2条答案

按热度按时间

djmepvbi1#

我猜是<main>标签上的margins，你能试着用下面的代码代替吗？

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

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

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

赞(0）回复(0）举报 2023-06-07

eqzww0vc2#

你应该尝试从main元素中删除height属性，并在css的body选择器中将vh改为percentage，代码如下所示：

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

赞(0）回复(0）举报 2023-06-07

我来回答

iOS上的Chrome：HTML文档底部的大空间

2条答案

相关问题

热门标签

最新问答