100vh包装器布局下如何实现sticky定位nav导航栏

首先纠正几个认知偏差：

1. position: sticky 元素不需要是 <body> 的直接子元素才能生效，它的生效规则是：相对于最近的可滚动祖先元素（若所有祖先都没有设置非visible的overflow属性，则相对于视口）定位，只要父元素高度大于sticky元素自身高度、且没有设置截断滚动的overflow属性，就能正常触发粘滞效果。
2. 方案1出现多余垂直滚动条的核心原因：导航栏放在100vh高的包装器外部，页面总高度 = 导航栏实际高度 + 100vh，自然超出视口高度，在导航栏高度动态不确定的场景下，calc减固定值的方案确实不具备通用性。
3. 方案2sticky不生效的核心原因：导航栏放在<header>内部时，<header>作为父元素高度刚好和导航栏高度一致，没有多余滚动空间，自然无法触发粘滞效果，和它是不是body直接子元素没有关系。

最终实现代码 #

不需要修改<body>任何样式，直接把导航栏放到你原有的独立包装器容器内部，作为包装器的第一个直接子元素即可：

<body>
  <!-- 原有独立布局包装器，保留min-h-screen属性，无需修改body样式 -->
  <div class="flex flex-col min-h-screen bg-red-500">
    <!-- 导航栏作为包装器首个直接子元素 -->
    <nav class="bg-orange-500 sticky top-0 p-4 z-10">
      nav
    </nav>
    <header class="flex-shrink-0 bg-slate-500 p-4">
      header
    </header>
    <main class="flex-auto bg-lime-500 p-4">
      main
      <!-- 此处填充足够长的内容即可测试滚动时导航栏固定效果 -->
    </main>
    <footer class="flex-shrink-0 bg-violet-500 p-4">
      footer
    </footer>
  </div>
</body>

方案特性 #

• 完全符合不直接给<body>设置样式、用独立包装器实现布局的要求
• 无多余滚动条：导航栏在100vh高的包装器内部，初始状态总高度刚好等于视口高度，仅当内容超出视口时才会出现正常滚动条
• 自适应导航栏高度：不需要提前知道导航栏的固定高度，不管导航栏多高都不会出现高度计算偏差
• sticky效果正常：滚动时导航栏会始终固定在视口顶部，给nav添加z-10是为了避免滚动时下方内容覆盖导航栏

内容的提问来源于stack exchange，提问作者gremo