长内容场景下Sticky Navbar无法固定的问题求助

问题根源在于 body { height: 100vh; } 这个设置：当main内容过长时，body的高度被固定为视口高度，页面实际滚动的是main元素的超出部分。而设置了sticky的navbar-wrapper是相对于父容器body的，当滚动到body的底部边界后，sticky的固定效果会失效，导致导航栏跟着页面滚动。

修复方案 #

1. 调整body高度设置 #

删除body { height: 100vh; }，替换为min-height: 100vh，这样body会自动根据内容撑开高度，同时确保至少占满视口。

2. 修正菜单的最大高度 #

原来的max-height:95vh是相对于视口的，改成calc(100vh - 5vh)，减去导航栏的高度，避免菜单超出视口范围。

3. 增加层级避免遮挡 #

给navbar-wrapper添加z-index:100，确保菜单不会被main内容覆盖。

修改后的完整CSS代码：

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh; /* 替换原有的height:100vh */
}

main {
  background-color: lightblue;
  min-height: 95vh;
}

.navbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 100; /* 确保导航栏和菜单层级高于主内容 */
}

.navbar {
  display: flex;
  background-color: gray;
  align-items: center;
  min-height: 5vh;
}

.navbar-logo {
  margin-right: auto;
}

.burger {
  font-size: 2em;
  cursor: pointer;
}

.menu {
  background-color: lightgreen;
  position: absolute;
  right: 0;
  width: 200px;
  padding: 10px;
  max-height: calc(100vh - 5vh); /* 适配导航栏高度 */
  overflow-y: scroll;
}

.hidden {
  display: none;
}

更优实现思路：CSS Grid布局 #

用Grid划分页面区域，逻辑更清晰，彻底避免sticky的父容器限制问题：

• 将body设置为Grid布局，固定导航栏高度，主内容区域自动占满剩余空间
• 菜单直接相对于导航栏定位，无需依赖sticky

示例代码：

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: 5vh 1fr; /* 第一行导航栏，第二行主内容 */
  min-height: 100vh;
}

.navbar-wrapper {
  grid-row: 1 / 2;
}

.navbar {
  display: flex;
  background-color: gray;
  align-items: center;
  height: 100%;
}

.menu {
  position: absolute;
  right: 0;
  top: 5vh; /* 定位到导航栏下方 */
  width: 200px;
  padding: 10px;
  max-height: calc(100vh - 5vh);
  overflow-y: scroll;
}

main {
  grid-row: 2 / 3;
  background-color: lightblue;
}

这种方式下，导航栏始终固定在页面顶部，不受内容长度影响，布局逻辑更直观。

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