本文详解为何 .left-section 滚动条无法覆盖容器全部高度，并提供基于 Flexbox 与视口单位的现代 CSS 解决方案，确保左右两栏独立、完整、响应式滚动。
本文详解为何 `.left-section` 滚动条无法覆盖容器全部高度，并提供基于 flexbox 与视口单位的现代 css 解决方案，确保左右两栏独立、完整、响应式滚动。
在构建双栏布局（如导航栏 + 主内容区）时，常希望左右两栏各自拥有独立且完整高度的垂直滚动条。但如示例所示，当页面顶部存在 <header> 时，.left-section 的 overflow-y: auto 往往失效——滚动区域被截断，仅能滚动到“Link 18”附近，甚至最后一项显示不全。根本原因在于：父容器高度未被正确继承，且 body 默认文档流未为子元素留出可滚动空间。
? 核心修复原则
- ✅ 使用 100dvh 替代 100vh：避免移动端地址栏缩放导致的高度计算偏差；
- ✅ body 设为 display: flex; flex-direction: column：使其成为弹性容器，让 .container 可通过 flex: 1 占满剩余空间；
- ✅ .container 必须设置 overflow: hidden：防止其内容溢出干扰子容器滚动行为；
- ✅ 子栏（如 .left-section）需显式设 height: 100% 并配合 overflow: auto，同时用 flex: 0 0 30% 精确控制宽度，避免 flex 基线拉伸干扰；
- ✅ 链接使用 padding 而非 margin：既提升点击热区，又避免外边距塌陷影响滚动高度计算。
✅ 推荐代码实现（含重置与语义化优化）
/* 全局重置（推荐） */
* {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100dvh; /* 动态视口高度，更可靠 */
}
body {
overflow: hidden; /* 可选，但有助于禁用全局滚动 */
display: flex;
flex-direction: column;
}
.container {
flex: 1; /* 占满 body 剩余空间 */
display: flex;
overflow: hidden; /* 关键：约束子容器滚动范围 */
}
.left-section {
flex: 0 0 30%; /* 不伸缩、不收缩、固定宽度30% */
padding: 1rem;
background-color: #f0f0f0;
overflow: auto;
height: 100%; /* 确保滚动高度撑满父容器 */
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%;
}? HTML 结构注意事项
确保 <header> 位于 .container 外部且上方，并作为 body 的第一个子元素（符合 flex-direction: column 流向）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<header>
<h1>Welcome</h1>
<p>This is the banner section.</p>
</header>
<div class="container">
<div class="left-section">
<h3>Links</h3>
<!-- 20+ 个链接 -->
</div>
<div class="right-section">
<p style="height: 200vh;">长内容用于测试滚动...</p>
</div>
</div>⚠️ 常见误区提醒
- ❌ 不要对 .left-section 仅设 height: 100vh：它会忽略 <header> 高度，导致总高度超限；
- ❌ 避免在 .container 上遗漏 overflow: hidden：否则内部滚动可能被截断或触发意外全局滚动；
- ❌ 不要依赖 margin-bottom 控制链接间距：易引发外边距合并（margin collapse），影响滚动容器实际内容高度；
- ✅ 建议在开发中启用浏览器开发者工具的「Layout」面板，实时检查各元素的 computed height 和 scrollHeight，验证是否真正撑满。
通过以上结构化调整，.left-section 将始终具备从顶部标题到底部链接的完整可滚动区域，无论窗口大小或 <header> 是否存在，均可稳定工作——这是构建专业级双栏管理界面、侧边导航系统或 IDE 风格布局的坚实基础。
