当页面包含固定头部（header）时，左侧栏的滚动条无法覆盖全高，仅在窗口缩小时部分生效；根本原因是父容器高度未正确分配，需通过 flex 布局与 100dvh 配合实现完整高度继承。
当页面包含固定头部（header）时，左侧栏的滚动条无法覆盖全高，仅在窗口缩小时部分生效；根本原因是父容器高度未正确分配，需通过 flex 布局与 `100dvh` 配合实现完整高度继承。
在构建双列独立滚动布局（如导航栏 + 主内容区）时，常见误区是仅对 .left-section 设置 height: 100% 和 overflow-y: auto，却忽略其父级容器的高度来源——尤其是当
✅ 正确解决方案：基于 Flex 的高度链式继承
核心要点如下：
- 使用 100dvh 替代 100vh：避免移动端地址栏缩放导致的高度计算偏差；
-
body 设为 display: flex; flex-direction: column：使
和 .container 成为垂直排列的弹性子项； - .container 应设 flex: 1 并 overflow: hidden：确保它占据剩余全部空间，同时防止内部溢出干扰布局；
- .left-section 和 .right-section 均需 height: 100% + overflow: auto：配合父容器的 flex 分配，实现真正独立滚动；
- 锚点链接改用 padding 而非 margin：既提升点击热区，又避免外边距塌陷影响滚动范围。
以下是优化后的完整代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Two Columns with Independent Scrollbars</title>
<style>
/* Quick Reset */
* { margin: 0; box-sizing: border-box; }
html, body {
height: 100dvh; /* 关键：动态视口高度 */
}
body {
overflow: hidden;
display: flex;
flex-direction: column;
}
header {
padding: 1rem;
background-color: #333;
color: white;
}
.container {
flex: 1; /* 占据剩余全部高度 */
display: flex;
overflow: hidden; /* 阻止内部滚动穿透 */
}
.left-section {
flex: 0 0 30%; /* 不伸缩、不收缩、固定宽度 */
padding: 1rem;
background-color: #f0f0f0;
overflow: auto;
height: 100%;
}
.left-section a {
display: block;
padding: 0.5rem 0; /* 推荐用 padding 替代 margin */
text-decoration: none;
color: #0066cc;
border-bottom: 1px solid #ddd;
}
.right-section {
flex: 1; /* 自适应剩余宽度 */
padding: 1rem;
background-color: #e0e0e0;
overflow: auto;
height: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<p>This is the banner section of the page.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</header>
<div class="container">
<div class="left-section">
<h3>Links</h3>
<!-- 20 条链接 -->
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- ... -->
<a href="#">Link 20</a>
</div>
<div class="right-section">
<p style="height: 200vh; margin: 0;">
This right section has tall content — scroll independently!
</p>
</div>
</div>
</body>
</html>⚠️ 注意事项
- 若
有固定高度（如 height: 60px），也可改用 calc(100dvh - 60px) 配合 height 属性，但 flex: 1 更健壮且响应式友好； - 避免在 .left-section 内部使用 margin-top/bottom 控制间距，否则可能造成滚动区域“错位”（顶部空白不可滚动）；
- 在 Safari 中，overflow: auto 对 flex 子项有时表现异常，务必确保父容器已明确高度（即 height: 100% 或 flex: 1）；
- 如需支持旧版浏览器，可降级使用 100vh，但需配合 JavaScript 动态修正高度（不推荐，优先用 dvh）。
通过以上结构化调整，.left-section 的滚动条将始终覆盖其完整分配高度，无论窗口尺寸如何变化，且与右侧区域完全解耦、互不干扰。
