如何让侧边栏滚动溢出而非主体内容？（附复现示例）

要实现主体内容与侧边栏均占满视口高度，且仅侧边栏可滚动，关键要给布局添加明确的高度约束，以下是具体修改方案：

核心修改要点 #

• 确保包含主体和侧边栏的父容器设置明确的视口高度，比如height: 100vh——overflow-y生效的前提是元素有明确的边界，才能判断何时触发滚动。
• 侧边栏设置height: 100%继承父容器高度，同时开启overflow-y: scroll。
• 主体内容占满剩余空间，设置overflow: hidden禁止自身滚动。

示例代码 #

假设你的布局结构如下：

<div class="page-container">
  <section class="main-content">
    <!-- 主体内容 -->
  </section>
  <aside class="sidebar">
    <!-- 侧边栏长内容 -->
  </aside>
</div>

对应的CSS调整：

/* 重置默认边距，确保视口无多余留白 */
html, body {
  margin: 0;
  padding: 0;
}

/* 父容器用flex布局，占满整个视口高度 */
.page-container {
  display: flex;
  height: 100vh;
}

/* 主体内容占满剩余空间，禁止滚动 */
.main-content {
  flex: 1;
  overflow: hidden;
}

/* 侧边栏固定宽度，继承父容器高度，开启垂直滚动 */
.sidebar {
  width: 280px;
  height: 100%;
  overflow-y: scroll;
}

如果需要隐藏侧边栏滚动条但保留滚动功能，可额外添加：

/* Firefox 适配 */
.sidebar {
  scrollbar-width: none;
}
/* Chrome、Safari 等webkit内核浏览器适配 */
.sidebar::-webkit-scrollbar {
  display: none;
}

内容的提问来源于stack exchange，提问作者L. Berger