手机屏幕导航栏隐藏内容答案

【问题标题】：Phone's on screen navigation bar hides content手机屏幕导航栏隐藏内容
【发布时间】：2020-11-15 13:40:02
【问题描述】：

我正在开发一个实现 100vh 登陆屏幕的网站，但底部导航栏（带有主页、返回选项的手机导航）隐藏了我的内容的底部。我已经在使用 JavaScript window.innerHeight 让浏览器考虑地址栏占用的空间，但这似乎没有考虑到手机的屏幕 UI。我将不胜感激有关如何解决此问题的任何想法，谢谢:)

让 vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', ${vh}px);

window.addEventListener('resize', () => { 让 vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', ${vh}px); });

CSS 高度：100vh；高度：计算(var(--vh, 1vh) * 100);

作为设计的一部分，我正在实现一个链接到页面内容开头的动画箭头。

您可以在http://jakubsramek.com/cs/查看它

【问题讨论】：

您添加了元数据？
是的，我愿意。如上所述，问题不在于视口宽度，而是视口高度。

标签： javascript css responsive

【解决方案1】：

更新

好吧，伙计们刚刚想通了，问题在于我的 javascript 文件处理 vh 设置为异步。感谢您的帮助！

【讨论】：

【解决方案2】：

您可以仅使用 CSS 来解决此问题。你可以使用 calc 函数是 CSS，你从 100vh 中减去导航栏的高度（假设是 30px）。示例：

 .element {
   height: calc(100vh - 30px);
 }

【讨论】：

地址栏的大小并不总是30px，向下滚动时不显示
@phoenixstudio 您可以按照自己的创意方式编辑设计。一个例子是在顶部和底部放置一些边框，因此那里没有任何重要的内容。如果编辑设计不是一个选项，您可以随时进行 onScroll 行为事件。确定导航栏显示的条件（可能向下滚动？抱歉，我不是安卓用户），然后在您自己的 onScroll 事件中匹配这些条件，以显示或隐藏您计划放在那里的任何内容。
谢谢你的解释，我只是想指出不需要猜测（猜测大小或是否滚动），只需使用 innerHeight 并更新样式 onresize 事件

【解决方案3】：

当你点击或滚动时你应该使用 window.innerHeight 改变

<body onresize="resizemyDiv()">

或

window.onresize = function (){
 // some code here to get window size
 // and adjust the size or your div
}

【讨论】：