个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我刚刚开始从事一个项目，并注意到在移动 iOS 上的 Chrome 中对其进行测试时，我的固定导航栏似乎存在问题。令人沮丧的是，起初我认为这可能是浏览器中的一个错误，但在检查了过去的项目后，他们似乎没有固定属性的问题，并且表现出您所期望的。
似乎正在发生的事情是，当您开始向下滚动时，固定导航栏被隐藏在浏览器地址栏下方。我附上了一张图片，希望能解释我的意思。
然后我认为它可能与脚本或样式表有冲突，所以我将我的模板剥离到最基本的部分，它的行为似乎仍然相同。
有没有人遇到过这个。我的元标记有问题吗？我尝试了不同的选择，但它似乎仍然在做同样的事情。非常感谢任何帮助。
我的精简代码是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=2, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div style="background: red; position:fixed;
top: 0;
left:0;
width:100%;
z-index: 1030; height: 80px;">
</div> <main class="main-content">
<div style="height: 1950px;"></div>
</main>
</div><!-- /wrapper -->
</body>
</html>
红色导航栏是您在附图中看到的高度的两倍。上半部分已开始隐藏在浏览器地址栏下方。
最佳答案
其实IOS和position:fixed有问题..我已经这样解决了..希望我也能对你有用:
* {box-sizing:border-box;}
body {
height:100vh;
max-height:100vh;
min-height:100vh;
overflow: hidden;
position:relative;
}
#wrapper {
padding-top: 80px;
height:100vh;
max-height:100vh;
min-height:100vh;
overflow-y:auto;
overflow-x:hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=2, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div style="background: red; position:absolute;
top: 0;
left:0;
width:100%;
z-index: 1030; height: 80px;">
</div>
<main class="main-content">
test
<div style="height: 1950px;"></div>
</main>
</div><!-- /wrapper -->
</body>
</html>总而言之，我依赖于 Position absolute 而不是 Position fixed
关于html - 修复了导航栏隐藏在 Chrome 移动版浏览器地址栏后面的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63866165/
25
4
0
我不知道这是否可行，但是当用户位于某个页面时是否可以禁用浏览器中的 URL 地址栏？如果用户位于某个页面上，用户是否还可以禁用浏览器按钮？ 但问题在于它需要在所有浏览器上运行，Chrome、Safar
我的网站响应版本的地址栏有一个非常奇怪的问题，http://beta.life.edu .一切似乎都正常工作，地址栏除外，它在页面上滚动时基本上不会折叠。我已经在以下 LIVE 设备上对此进行了测试:
如何使用 Javascript 在移动设备上的 Chrome 中启用“始终显示”地址栏？ 换句话说，不要在用户向下滚动时隐藏。 最佳答案 您可以创建一个 div，将高度设置为 100% 并使用 ove
我在 QT 中创建了一个简单的网络浏览器。我不想在地址栏旁边放置一个单独的搜索栏。我也想让地址栏成为搜索栏。例如，我想为在地址栏中输入的内容设置条件，如果不存在“http://”或“www”或“.co
我有一个简单的大图像，我想适应屏幕的宽度。该图像大约有 1600 像素宽，并且具有 max-width:100%; 属性，因此它应该始终适合屏幕。 这个问题出现在android的Chrome浏览器上，
在 Safari iOS15 中，默认情况下，地址栏固定在视口(viewport)底部。如iOS 15 Safari floating address bar说明，您可以使用 padding-bott
在 iOS 15 中，Safari 改变了地址栏的行为。它漂浮在页面底部附近的某个地方。 这会极大地影响页面的设计和用户体验。 是否有检测地址栏的指示器，知道它何时存在并知道它的位置？ 最佳答案 使用
在this例如，ng-view 指令不会更改地址栏中的 URL。但是，当我将此示例移植到我的应用程序时，栏中的地址会在每次点击时更改为“href”链接标记中的 URL，即使我放置了相对 URL(如示例
因此，当他尝试加载的页面符合我的条件(正则表达式)时，我试图将浏览器重定向到另一个网页。目前它看起来像这样:(想出了 here ) function listener(event) { var
我正在制作一个覆盖 New Tab 的 Google Chrome 扩展程序(当用户打开新标签页或窗口时出现的页面)。 我想在点击按钮时触发对 Google 地址栏的关注。我读过 chrome.omn
如何使用 JavaScript 在横向模式下滚动 URL 栏。在纵向模式下，您只需执行 window.scrollTo(0,1) 即可，但在横向模式下则不行。它在 URL 栏上进行了一半。 有什么尝试
我正在构建一个 Chrome 扩展程序，用于翻译 Chrome 浏览器中文本字段中的拼写错误。 我使用了 contextMenu API 并成功实现了扩展，用户可以使用它调出上下文菜单并选择扩展菜单来
我最近注意到在 Firefox for Android 的地址栏右侧出现了一个半高的 android。 这似乎表明 native 应用程序可用于您正在查看的网站(StackExchange 就是一个这
关于此的很多帖子，但不完全适合我的情况。我的页面将灵活的尺寸设置为 100% 宽度和 100% 高度，因此典型的加载滚动功能不起作用。有什么想法或其他解决方案吗？ 谢谢! CSS: * { m
构建地址字段(如 Safari 中的地址字段)的最佳方法是什么？ 需要有可编辑的文本，并确定进度指示器背景。 最佳答案 你可以继承NSTextField并覆盖 -drawRect:方法用某种颜色或渐变
我正在为我的商店构建一个预订应用程序，该应用程序将显示在一个封闭的盒子中供我的客户使用。由于应用程序将接受付款，我需要启动 Safari 通过我的网站处理付款，以避免 Apple 的销售费用。 当我通
我正在使用 jQuery 根据位置中散列的更改为 scrollTop 设置动画。效果很好。 问题是，当我点击“主页”时，我希望它一直滚动到真正的顶部——包括地址栏。 显然，这与大多数人想要的相反。所以
请问ios7中导航栏问题有没有解决办法？你无法隐藏它的地方。window.scrollTo(0, 1) 在 ios7 中不再起作用。 只要我触摸屏幕的下部或上部，它就会激活。 有几个这样的线程，但它们
这个问题在这里已经有了答案: Hiding the address bar of a browser (popup) (11 个答案) 关闭 3 年前。 如何隐藏使用 JS 创建的弹出窗口的位置/地
在我的 Flutter Web 应用程序浏览器中，地址栏没有隐藏在滚动中。 flutter 支持这个功能吗？ 最佳答案 https://github.com/flutter/flutter/issue
我是一名优秀的程序员,十分优秀！