javascript - 为什么我的 'position:fixed' 导航栏显示在网页底部而不是移动视口(viewport)底部?

标签 javascript html ios css webview

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

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

只有当我将顶部位置更改为大约 50% 时,我才会出现在设备 View 中。

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

最佳答案

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

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

下面是对跨多个移动平台和设备测试的 position: fixed 的评论:

Fixed Positioning in Mobile Browsers

这是我几天前对相关问题的回答:

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

希望这对您有所帮助。祝你好运!

关于javascript - 为什么我的 'position:fixed' 导航栏显示在网页底部而不是移动视口(viewport)底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31757220/

相关文章:

javascript - Javascript 类为什么/如何通过在它们之前加上下划线前缀来访问它们自己的值?

html - 浏览器之间的差异

ios - 如何将 .ipa 文件导入 Xcode 进行开发

ios - Xcode 分发到应用程序商店后....app 和 .dSYM 在哪里?

ios - 缓存 UIViewController 用于呈现/推送

javascript - 在 Jinja 中模板化 JavaScript 函数

javascript - 更改 html 输入字段中的 Placeholder 属性

javascript - django - 在包含的模板中时 javascript 不工作

javascript - 如何让 Angular.js 与其他库一起使用?

html - Chrome 和 Chromium 有我的 <ul> 左边的一个像素,所有其他浏览器都显示完美