个人中心
gpt4 book ai didi

html - 修复了导航栏隐藏在 Chrome 移动版浏览器地址栏后面的问题

转载 作者：行者123 更新时间：2023-12-04 03:56:13 24 4
gpt4 key购买 nike

我刚刚开始从事一个项目，并注意到在移动 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>

enter image description here

红色导航栏是您在附图中看到的高度的两倍。上半部分已开始隐藏在浏览器地址栏下方。

最佳答案

其实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/

24 4 0
文章推荐： r - 在 ggplot2 中；在这种情况下，如何将 x 轴移动到顶部，然后使用 coord_flip () 旋转轴？
文章推荐： node.js - NestJs EventBus 在 EventHandler 复制事件
文章推荐： python - Pandas 数据框到 namespace 为 None 的嵌套字典
文章推荐： python - 插入一个系列，并为第二个(常数)系列输出常数