Question

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

红色导航栏是您在所附图像中看到的高度的两倍。上半部分已经开始位于浏览器地址栏的旁边。

Answer 1

实际上，IOS和位置存在问题：已修复..我已经解决了..我希望我也能对您有用：

* {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>

全部是因为我依靠的是绝对位置，而不是固定位置

固定导航栏隐藏在Chrome移动设备上浏览器的地址栏后面

1 个答案: