当页面包含 header 时，.left-section 的垂直滚动条无法覆盖其完整高度，仅在窗口缩小时部分显示且截断内容；根本原因是父容器未正确分配可用高度，需通过 flex 布局与 100dvh 高度重置实现全高滚动。
当页面包含 header 时，`.left-section` 的垂直滚动条无法覆盖其完整高度，仅在窗口缩小时部分显示且截断内容；根本原因是父容器未正确分配可用高度，需通过 `flex` 布局与 `100dvh` 高度重置实现全高滚动。
在构建双栏独立滚动布局（如导航栏 + 主内容区）时，一个常见陷阱是：尽管为 .left-section 设置了 overflow-y: auto 和固定宽度，其滚动区域仍无法延伸至容器底部——尤其当页面顶部存在
✅ 正确解决方案：基于 Flex 的高度流式分配
关键在于建立一条从根元素到滚动容器的完整高度传递链：
- 将 html 和 body 高度设为 100dvh（推荐替代 100vh，避免移动端地址栏高度变化引发的布局抖动）；
- body 设为 display: flex; flex-direction: column，使其子元素（
+ .container）按列堆叠； - .container 使用 flex: 1 自动填充剩余空间，并设置 overflow: hidden 防止意外溢出；
- .left-section 和 .right-section 均需显式设置 height: 100%，并搭配 overflow: auto 实现独立滚动；
- 使用 flex 缩写（如 flex: 0 0 30%）精确控制左侧栏不伸缩、固定宽度，右侧栏 flex: 1 自适应剩余宽度。
以下是优化后的完整代码示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Two Columns with Independent Scrollbars</title><style>
/* 快速重置 */
* { margin: 0; box-sizing: border-box; }
html, body {
height: 100dvh; /* ✅ 关键：使用动态视口高度 */
}
body {
overflow: hidden; /* 可选，隐藏全局滚动条 */
display: flex;
flex-direction: column; /* ✅ 纵向布局，使 header + container 占满高度 */
}
.container {
flex: 1; /* ✅ 占据 body 剩余全部高度 */
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: blue;
}
.right-section {
flex: 1; /* ✅ 自适应剩余宽度 */
padding: 1rem;
background-color: #e0e0e0;
overflow: auto;
height: 100%;
}
</style><header><h1>Welcome to My Web Page</h1>
<p>This is the banner section of the page.</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 20</a>
</div>
<div class="right-section">
<p style="height: 200vh;">Some test paragraph really tall...</p>
</div>
</div>
⚠️ 注意事项与最佳实践
- 避免 margin 在滚动容器内使用：a 标签的 margin-bottom 会导致滚动高度计算偏差；改用 padding 更安全且语义合理；
- 慎用 vh 单位：100vh 在 iOS Safari 中可能因地址栏显示/隐藏导致高度跳变，100dvh（动态视口高度）是现代标准更优选择（Can I Use 支持情况）；
- overflow: hidden 的作用：在 .container 上设置可防止左右栏内容溢出干扰整体布局，是实现“严格独立滚动”的必要约束；
- 响应式增强建议：可在媒体查询中将 .left-section 的 flex-basis 改为 100%，使小屏下变为上下堆叠布局，提升移动体验。
通过以上结构化调整，.left-section 滚动条将始终覆盖其完整高度，无论窗口尺寸如何变化，所有链接均可平滑滚动访问——真正实现可靠、可维护的双栏独立滚动布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
