下面有一个非常简单的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>
2条答案
按热度按时间djmepvbi1#
我猜是
<main>标签上的margins，你能试着用下面的代码代替吗？或者，尝试使用绝对定位：
eqzww0vc2#
你应该尝试从main元素中删除height属性，并在css的body选择器中将vh改为percentage，代码如下所示：