Telegram Channel
https://stackoverflow.com/a/72245072/2368737

学会一个前端的坑。如果你把高度设置为 100vh 试图占满浏览器的高度,这在桌面上没问题。

但是在手机浏览器上,浏览器的 navigator(地址栏)会占掉一点高度,而这个高度不会计算在 vh 里,结果就是你的 document 的实际高度会超出浏览器里的可视高度,然后你的页面就会在垂直方向上变成滚动(或者被截断,如果你将 overflow 设置为 hidden)。

这个恶心的现象在桌面版的 Chrome DevTools 里也无法调试,因为 Toggle Device Toolbar 模拟的 mobile 页面并不会包含 navigator。

在现代浏览器上,应该使用 svh 来获取 navigator 下方的,真实的页面可视高度。实测在最新版的 ios safari 和 chrome 上都可使用。
https://caniuse.com/?search=dvh
#FE
 
 
Telegram Channel