固定导航栏隐藏在 Chrome 手机上的浏览器地址栏后面答案

【问题标题】：Fixed Navbar is hidden behind browser's address bar on Chrome mobile固定导航栏隐藏在 Chrome 手机上的浏览器地址栏后面
【发布时间】：2020-09-13 09:32:53
【问题描述】：

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

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

【问题讨论】：

标签： html google-chrome mobile scroll css-position

【解决方案1】：

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

这就是我依赖绝对位置而不是固定位置

【讨论】：

非常感谢您。我会试一试，看看它是否对我有帮助。让我感到困惑的是，我还有其他网站似乎没有位置问题：已修复。上面的例子在 Safari iOS 中似乎很好。 Chrome似乎是问题所在。我认为这也可能是由于下拉刷新选项影响了视口的大小。
对于我来说，同样的问题在两个不同的网站上发生了两次，直到我真正意识到 IOS 位置固定的问题..也许是浏览器版本是原因
您在 Safari 中是否也遇到同样的问题？
是的，Safari 也是
以上确实有效。我还发现这个解决方案（使用 -webkit-fill-available）很有效：css-tricks.com/css-fix-for-100vh-in-mobile-webkit