我正在开发一个网站，我实现了 100vh 登陆屏幕，但底部导航栏（带有主页、后退选项的手机导航）隐藏了内容的底部。我已经在使用 JavaScript window.innerHeight 来使浏览器考虑地址栏占用的空间，但这似乎没有考虑手机的屏幕用户界面。如果您有任何有关如何解决此问题的想法，我将不胜感激。
JS
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
CSS
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
作为设计的一部分，我正在实现一个链接到页面内容开头的动画箭头。
上查看您应该使用，因为单击或滚动时 window.innerHeight 会发生变化
<body onresize="resizemyDiv()">
或
window.onresize = function (){
// some code here to get window size
// and adjust the size or your div
}
您只需使用 CSS 即可解决此问题。您可以使用 CSS 中的
calc .element {
height: calc(100vh - 30px);
}
更新
好吧，大家刚刚弄清楚了，问题出在我处理 vh 的 javascript 文件被设置为异步。感谢您的帮助！
这里的技巧是使用
height: 100%;height: 100vh;请记住，如果您难以获得实际填充屏幕的高度，则需要设置所有父节点的样式（直到文档的根节点）
height: 100%