CSS Flexbox实现顶部与侧边粘性导航栏及滚动布局需求

需求 #

• 实现高度固定为50px的header，下方设置粘性导航栏（sticky nav）
• 侧边导航栏与顶部导航栏在同一位置实现粘性定位
• 两个导航栏均保留滚动能力
• 非粘性footer固定在页面最底部

当前困境 #

只能单独实现以下两种效果之一：

1. 固定header与顶部导航栏时，页面可正常滚动
2. 主元素非固定时，顶部粘性导航可正常工作

需要同时满足所有需求，优先采用纯HTML/CSS方案。

以下是修改后的完整代码，纯CSS/HTML实现所有需求：

修改后的CSS #

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

/* ! BODY / HTML */
html,
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: red;
}

/* ! HEADER */
header {
  height: 50px; /* 固定header高度 */
  font-size: 24px;
  color: white;
  background-color: orange;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

/* ! CONTAINER */
.container {
  flex: 1; /* 让容器占据header和footer之外的空间 */
  display: flex;
  flex-direction: column;
}

/* ! TOP NAV */
.top_navbar {
  display: flex;
  flex-flow: row nowrap;
  position: sticky;
  top: 50px; /* 粘性定位在header下方，对应header的50px高度 */
  align-items: center;
  background-color: yellow;
  padding: 0.5rem 1rem;
  z-index: 10;
}

.top_navbar a {
  color: white;
  margin-left: 1rem;
}

#nt_left {
  background-color: green;
  flex-grow: 1;
}

#nt_right {
  background-color: indigo;
}

/* ! MAIN CONTENT */
.main_body {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  overflow: auto; /* 让主内容区域可滚动 */
}

#ns_left {
  flex: 0 0 300px;
  position: sticky; /* 添加sticky定位 */
  top: calc(50px + 42px); /* 顶部导航栏高度约42px，总距离顶部为header+top_nav的高度 */
  background-color: violet;
  font-size: 18px;
  align-self: flex-start; /* 关键：让侧边栏基于父容器顶部定位，而非滚动容器 */
  height: fit-content; /* 侧边栏高度自适应内容 */
  max-height: calc(100vh - 50px - 42px); /* 限制最大高度，避免超出视口 */
  overflow-y: auto; /* 侧边栏内容超出时可滚动 */
}

#main {
  flex: 1;
  background-color: red;
  font-size: 26px;
  padding: 1rem;
}

/* ! FOOTER */
footer {
  font-size: 24px;
  color: white;
  background-color: orange;
  padding: 0.5rem 1rem;
}

修改后的HTML #

<header>THIS IS A HEADER</header>
<div class="container">
  <div class="top_navbar" id="top_navbar">
    <div class="nav_top" id="nt_left">
      <a href="#" id="logo"><span class="material-symbols-outlined"> sentiment_satisfied </span></a>
    </div>
    <div class="nav_top" id="nt_right">
      <a href="#">TOP LINK 1</a>
      <a href="#">TOP LINK 2</a>
      <a href="#">TOP LINK 3</a>
    </div>
  </div>
  <div class="main_body">
    <aside class="sidebar" id="ns_left">
      <h3>sidebar</h3>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item ...</li>
      </ul>
    </aside>
    <article class="article" id="main">
      <h3>article</h3>
      <!-- 添加更多内容测试滚动 -->
      <p>
        Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
        cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
        copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
      </p>
      <p>
        Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
        cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
        copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
      </p>
      <p>
        Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
        cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
        copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
      </p>
      <p>
        Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
        cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
        copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
      </p>
    </article>
  </div>
</div>
<footer>THIS IS A FOOTER</footer>

1. 页面整体布局重构：给html和body设置display: flex; flex-direction: column;，让container用flex:1占据中间空间，确保footer固定在底部。
2. 固定header高度：明确设置header的height:50px，为后续粘性导航的top值提供准确参考。
3. 顶部导航粘性定位调整：将top_navbar的top值设为50px，刚好贴在header下方，避免被header遮挡。
4. 侧边栏粘性定位修复：
   • 给#ns_left添加position: sticky和align-self: flex-start，让它基于主容器的顶部定位，而非滚动的main_body容器。
   • 设置top: calc(50px + 42px)，确保侧边栏贴在顶部导航下方。
   • 添加max-height和overflow-y: auto，让侧边栏内容超出时可滚动，同时不超出视口。
5. 滚动区域调整：让main_body用flex:1填充剩余空间，内部内容超出时自动滚动，同时不影响顶部和侧边的粘性导航。

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