下面有一个很简单的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>