Sticky头部滚动至特定高度后失效的问题解决方案咨询

使用CSS Grid布局实现包含header、导航栏和main区域的页面，期望滚动main内容时header始终固定在屏幕顶部，但滚动到一定高度后header会消失。

原代码 #

HTML #

<div class="page">
  <div class="header">
    kkk
  </div>
  
  <div class="nav">
    kkk
  </div>
  
  <div class="main">
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
    <div class="item">kkk</div>
  </div>
</div>

CSS #

.page {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto;
  grid-template-areas:
    "header header header"
    "nav main main";
}

.header {
  position:sticky;
  top:0;
  height: 120px;
  background: blue;
  grid-area: header;
}

.nav {
  height: 100%;
  background: red;
  grid-area: nav;
}

.main {
  background: green;
  grid-area: main;
}

.item {
  height: 50px;
  padding: 20px;
}

问题原因 #

.page 设置了 height: 100vh，导致容器高度固定为视口高度且未开启内部滚动。此时页面滚动实际是<body>元素的滚动，而position: sticky的元素仅对最近的可滚动祖先生效。.header的可滚动祖先变为<body>，但.page本身高度固定，页面滚动时.header会随.page整体上移，最终超出视口。

解决方案 #

1. 移除.page的height: 100vh，让容器高度由内容自然撑开，同时添加min-height: 100vh保证页面至少占满视口
2. 给.main添加overflow-y: auto，让main区域内部独立滚动，避免触发body滚动
3. 调整.nav的高度，使其至少占满视口剩余空间，保持布局美观

修改后的CSS #

.page {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto;
  grid-template-areas:
    "header header header"
    "nav main main";
  min-height: 100vh; /* 保持页面至少占满视口高度 */
}

.header {
  position:sticky;
  top:0;
  height: 120px;
  background: blue;
  grid-area: header;
  z-index: 10; /* 确保header在其他元素上方 */
}

.nav {
  min-height: calc(100vh - 120px); /* 减去header高度，保持侧边栏占满剩余视口 */
  background: red;
  grid-area: nav;
}

.main {
  background: green;
  grid-area: main;
  overflow-y: auto; /* 开启main内部滚动 */
}

.item {
  height: 50px;
  padding: 20px;
}

说明 #

• 移除固定高度后，.header的sticky定位会相对于<body>生效，滚动时稳定固定在顶部
• main区域内部滚动不会带动整个页面，彻底避免header随页面滚动消失的问题
• 侧边栏的min-height设置保证了布局完整性，不会因内容不足出现高度塌陷

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