如何让 HTML 左侧栏滚动条覆盖完整高度并正常滚动

本文详解如何修复 Flex 布局中左侧固定宽度栏（.left-section）滚动条无法覆盖全高、内容截断的问题，核心在于正确设置视口高度继承链、容器弹性行为及溢出控制。

本文详解如何修复 flex 布局中左侧固定宽度栏（`.left-section`）滚动条无法覆盖全高、内容截断的问题，核心在于正确设置视口高度继承链、容器弹性行为及溢出控制。

在构建双栏独立滚动布局（如导航栏 + 主内容区）时，一个常见问题是：左侧栏设置了 overflow-y: auto，但滚动条只覆盖部分区域，无法滚动到底部链接（如示例中的 “Link 18” 仅显示一半），甚至在窗口缩小时才出现——这并非浏览器 Bug，而是 CSS 高度计算链断裂所致。

根本原因在于：原始代码中 <header> 元素脱离了 .container 的 Flex 流，但 body 默认为 display: block，其子元素（header + p.container）按文档流堆叠。此时 .container { height: 100vh } 实际仅占用 剩余视口高度（即 100vh – header高度），而 .left-section 的 height: 100% 又继承自 .container 的缩减后高度，导致可用滚动空间不足。

✅ 正确解法需建立三层高度继承闭环：

1. 根级高度锚定：将 html, body 设为 height: 100dvh（推荐 dvh 而非 vh，避免 iOS Safari 地址栏遮挡问题）；
2. body 弹性化：body { display: flex; flex-direction: column; }，使 header 和 .container 成为弹性子项；
3. 容器占满剩余空间：.container { flex: 1; overflow: hidden; } —— flex: 1 等价于 flex: 1 1 0，强制其撑满 body 剩余高度；
4. 子栏明确尺寸与溢出：.left-section 使用 flex: 0 0 30%（不伸缩、不收缩、基础宽度30%），并设 height: 100% + overflow: auto，确保滚动区域严格匹配父容器高度。

以下是优化后的完整代码（含关键注释）：

立即学习“前端免费学习笔记（深入）”；

/* 重置与基础设定 */
* { margin: 0; box-sizing: border-box; }

html, body {
  height: 100dvh; /* 动态视口高度，兼容移动端地址栏变化 */
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 隐藏全局滚动条，交由子容器控制 */
}

.container {
  flex: 1; /* 占满 body 剩余空间 */
  display: flex;
  overflow: hidden; /* 防止 container 自身溢出产生额外滚动条 */
}

.left-section {
  flex: 0 0 30%; /* 固定宽度占比，不随容器伸缩 */
  padding: 1rem;
  background-color: #f0f0f0;
  overflow: auto; /* 关键：启用独立纵向滚动 */
  height: 100%;  /* 继承 container 的完整高度 */

  a {
    display: block;
    padding: 0.5rem 0; /* 推荐用 padding 替代 margin，提升点击热区 */
    text-decoration: none;
    color: #0066cc;
  }
}

.right-section {
  flex: 1; /* 自适应剩余宽度 */
  padding: 1rem;
  background-color: #e0e0e0;
  overflow: auto;
  height: 100%;
}

<header>
  <h1>Welcome</h1>
  <p>This is the banner section of the page.</p>
</header>

<p class="container">
  <p class="left-section">
    <h3>Links</h3>
    <!-- 20个链接保持不变 -->
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <!-- ... 中间链接省略 ... -->
    <a href="#">Link 20</a>
  </p>
  <p class="right-section">
    <!-- 示例长内容触发滚动 -->
    <p style="height: 200vh; margin: 0;">Scrollable content area...</p>
  </p>
</p>

⚠️ 注意事项：

• 避免在 .left-section 内使用 margin-bottom 控制链接间距（易引发滚动边界计算误差），统一改用 padding；
• 若项目需兼容旧版浏览器（如 IE），100dvh 可降级为 100vh，但需手动处理 iOS Safari 视口缩放问题；
• overflow: hidden 在 body 上非必需，但能防止意外全局滚动，增强布局可控性；
• 当右侧内容高度不足时，.right-section 滚动条不会出现——这是预期行为，符合“独立滚动”设计目标。

通过以上调整，.left-section 的滚动条将始终覆盖其完整分配高度（即 body 减去 header 后的全部空间），所有链接均可平滑滚动至可视区域，彻底解决截断与延迟显示问题。