当< html>虚拟键盘打开时，iOS上的Safari会滚动到元素之外

vwkv1x7d 于 2023-04-08 发布在 iOS

关注(0)|答案(1)|浏览(133)

尝试一下：
1.在iOS（设备或模拟器）上的Safari 12中打开此codepen。
1.集中输入。虚拟键盘应该打开。
1.现在滚动到页面底部。
1.你应该能够在<html>元素外滚动，看到一个Safari菜单/操作栏大小的白色条纹，如下所示：

1.当你关闭虚拟键盘，条纹去的方式…
这是Safari的一个bug吗？有什么方法可以修复这个bug吗？

1条答案

首先，您可以尝试使用height: 100vh;而不是height: 100%。由于和标签没有指定高度值，并且高度%基于其父级，因此无法直接应用百分比作为高度值。因此，您可以尝试

html, body {
  height: 100vh;
}

如果上面的方法不起作用，您可以尝试在body中使用overflow: hidden;来隐藏主体的溢出。