如何纯CSS实现固定侧边栏并适配顶部导航栏高度（无JS）

需求概述 #

需要实现如下布局：

• 蓝色响应式顶部导航栏，高度随设备自适应
• 红色侧边栏可通过顶部汉堡按钮折叠（仅使用Ruby on Rails + html.erb，不使用JavaScript）
• 滚动主内容区时，侧边栏固定在屏幕，且支持垂直滚动

当前遇到两个核心问题：

1. 无法实现侧边栏滚动时固定
2. 无法设置侧边栏高度为「视口高度 - 顶部导航栏高度」

原始代码 #

HTML结构 #

<body>
  <header class="header">
    <%= render 'layouts/navbar'%>
    <main>
      <%= render 'main/sidebar' %>
      <div class="custom-main-padding">
        <turbo-frame id="flash">
          <%= render 'layouts/flash' %>
        </turbo-frame>
        <%= yield %>
      </div>
    </main>
  </header>
</body>

核心CSS代码 #

main、body及custom-main-padding样式

main {
    width: 100vw;
    overflow: scroll;
    position: relative;
}
body {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    margin-left: auto;
    margin-right: auto;
}

navbar样式

.navbar {
    position: sticky;
    width: 100vw;
    overflow-y: scroll;
}

侧边栏样式

.custom-sidebar {
    position: absolute;
    display: flex;
    overflow-y: scroll;
    background-color: #201C4C;
    top: 0;
    bottom: 0;
    width: 200px;
    color: white;
    z-index: 1;
}

.custom-main-padding {
    padding: 5% 5% 5% 5%;
    z-index: -1;
}

修正方案 #

1. 调整HTML结构（语义化优化） #

将main从header中移出，确保布局层级清晰：

<body>
  <header class="header">
    <%= render 'layouts/navbar'%>
  </header>
  <main class="main-container">
    <%= render 'main/sidebar' %>
    <div class="custom-main-content">
      <turbo-frame id="flash">
        <%= render 'layouts/flash' %>
      </turbo-frame>
      <%= yield %>
    </div>
  </main>
</body>

2. 重写CSS实现需求 #

/* 全局基础样式 */
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  background: white;
  /* 用flex垂直布局，让主容器自动占满剩余高度 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 顶部导航栏样式 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #007bff; /* 蓝色，对应需求 */
}

.navbar {
  width: 100%;
  padding: 1rem;
  /* 高度随内容自适应，满足响应式需求 */
}

/* 主容器布局 */
.main-container {
  display: flex;
  flex: 1;
  /* 主容器自动占据视口剩余高度，即视口高度 - 导航栏高度 */
}

/* 侧边栏样式 */
.custom-sidebar {
  position: sticky;
  top: 0;
  width: 200px;
  background-color: #dc3545; /* 红色，对应需求 */
  color: white;
  overflow-y: auto;
  /* 高度继承主容器高度，自动匹配视口剩余空间 */
  height: 100%;
}

/* 主内容区样式 */
.custom-main-content {
  flex: 1;
  padding: 5%;
  overflow-y: auto;
}

关键说明 #

• 侧边栏固定：使用position: sticky + top: 0，滚动主内容区时，侧边栏会固定在视口顶部（相对于主容器），无需JavaScript即可实现固定效果。
• 高度适配：通过flex垂直布局，body设为flex-direction: column，main-container设置flex: 1自动占据视口剩余高度，侧边栏height: 100%继承该高度，完美实现「视口高度 - 导航栏高度」的需求。
• 语义化布局调整避免了原始代码中header嵌套main导致的定位冲突，同时提升了代码可维护性。

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