底部固定Footer搭配粘性Navbar失效问题求助

你遇到的核心问题确实是#root设置了height: 100%——这个属性让#root的高度固定为视口高度，当页面内容超出时，滚动发生在#root内部，而position: sticky的粘性效果仅在其包含块（这里是#root）的范围内生效，当Navbar滚到#root的底部边界后，就无法继续保持粘性了。

下面是修复后的代码，既能让Footer始终固定在页面底部，又能让Navbar保持顶部粘性：

修改后的CSS #

html, body {
  margin: 0; /* 去掉默认边距，避免布局偏移 */
  min-height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 用min-height:100vh代替height:100%，让容器随内容自适应高度 */
}

nav {
  position: sticky;
  top: 0;
  background: #fff; /* 加上背景色，避免滚动时被下方内容覆盖 */
  z-index: 100; /* 确保Navbar在其他内容上方 */
}

section {
  flex: 1; /* 让内容区域占满剩余空间，Footer自然被推到底部 */
}

section>div {
  height: 1000px;
}

footer {
  /* 可选：给Footer加样式区分 */
  background: #f0f0f0;
  padding: 1rem;
}

对应的HTML（无需修改） #

<div id="root">
  <header>Header</header>
  <nav>Navigation</nav>
  <section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </section>
  <footer>Footer</footer>
</div>

关键修改说明： #

• 用min-height: 100vh替代height: 100%：100vh表示视口高度，min-height确保#root至少占满整个视口，当内容超出时，容器高度会自动延伸，滚动发生在body上，而非#root内部。
• 给Navbar添加背景色和z-index：避免滚动时下方内容透过Navbar显示，同时保证Navbar在视觉层级上高于其他内容。
• 保留flex:1在section上：让内容区域自动填充#root的剩余空间，从而将Footer推到页面底部——当内容不足时Footer固定在视口底部，内容足够时则随页面延伸到底部。

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