为啥我的导航栏“位置：固定”显示在网页底部而不是移动设备的视口底部？

Posted 2023-02-23

【中文标题】为啥我的导航栏“位置：固定”显示在网页底部而不是移动设备的视口底部？

【英文标题】：Why is my nav bar with 'position:fixed' displaying at bottom of web page not bottom of viewport on mobile?为什么我的导航栏“位置：固定”显示在网页底部而不是移动设备的视口底部？

【发布时间】：2015-08-01 01:04:58

【问题描述】：

我有一个导航栏，它的位置设置为固定。这在浏览器和移动浏览器上按预期工作正常。导航栏位于视口的底部，其他所有内容都在其下方滚动。

但是当移动到应用程序中的移动网络视图时，同一页面会在页面的最后呈现导航栏，因此我必须向下滚动才能看到它。

仅当我将顶部位置更改为 50% 左右时，我才会进入设备视图。

似乎如果我从该页面中删除所有内容并且只有 empty ，即使我的页面是空的，我仍然会看到垂直滚动条。

【问题讨论】：

您能否在edit 中包含您的代码（或者实际上，最好是minimal reproducible example）？

【参考方案1】：

在移动设备上使用position: fixed 有几个已知问题。其中包括固定元素的行为，它并不总是保持不变。

虽然您的问题可能出在您的代码中，但这可能不是问题，因为您提到您的导航栏在各种移动浏览器上运行良好。

以下是在多个移动平台和设备上测试的 position: fixed 的评论：

Fixed Positioning in Mobile Browsers

这是我几天前对一个相关问题的回答：

Enable mobile device users to toggle div between position: fixed and position: static (or 'relative')

希望这会有所帮助。祝你好运！

【讨论】：

我认为我的问题不完全是位置：固定。似乎设备以某种方式计算页面高度 = 视口高度并将页脚放在页面底部而不是视口底部。我必须设置 bottom:50% 才能将其带到屏幕边缘。

好的。但是由于您在移动设备上使用position: fixed，您仍然应该查看我的答案中引用的视频和文章。它可以帮助您现在或将来进行故障排除。

另外，如果你还没有，看看这个属性：vh（视口高度）。如果你用谷歌搜索“CSS 视口单位”，你会找到另一种相对于视口放置和调整大小的方法。

谢谢，甚至 vh 也将导航栏放在了底部。

嗯，vh 相对较新。您的浏览器/应用程序可能不支持它。 caniuse.com/#search=vh