要让双栏填满视口高度，需从html、body开始设置height: 100%或min-height: 100dvh，并确保每层父容器（如.container、.left-section等）均显式声明height: 100%，漏一层即中断；推荐用flex布局，.container设display: flex，主内容区flex: 1更可靠；同时html、body须重置margin: 0并设width: 100%，避免宽度链断裂。
双栏布局怎么让左右两栏都填满视口高度？
直接给左栏或右栏写 height: 100vh 大概率失效，因为它们的父容器（比如 .container）没继承高度。浏览器不会自动把“视口高”往下传——必须手动打通高度链。
关键动作是：从 html 和 body 开始设 height: 100% 或 min-height: 100dvh，再确保中间每一层容器（包括 .container、.left-section、.right-section）都显式声明 height: 100%。漏掉任意一层，高度就断了。
-
100dvh比100vh更稳，能避开 iOS Safari 地址栏收起时的高度跳变 - 如果用 flex 布局，
.container设display: flex; flex-direction: column;，再让主内容区flex: 1，比硬写 height 更可靠 - 避免在
body上直接设overflow: hidden，否则滚动条会消失，内容被截断
为什么 flex 双栏写了 width 却不占满屏幕宽度？
常见现象是左栏固定宽、右栏写 flex: 1，但整体没撑满视口，右边留白。问题往往不在 flex 本身，而在父容器没设宽度基准。
浏览器对百分比/弹性宽度的计算，依赖父级的可用宽度。如果 html 或 body 有默认 margin: 8px，或者中间某个 div 没设 width: 100%，那 flex: 1 就只能分到那个“缩水后”的剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 务必加
html, body { margin: 0; width: 100%; } - 若双栏外还包了一层
.wrapper，它也得写width: 100%或width: 100vw（注意100vw含滚动条宽度，小屏慎用） - 别在子元素上写
width: 100%来“辅助”，flex 容器里这反而可能触发双重计算，导致错位
表格实现双栏布局？别这么干
用 display: table 或真实 <table> 标签做双栏，是兼容 IE8–10 的遗留方案，现在基本等于主动引入三类问题：语义错误、响应式瘫痪、可访问性崩坏。
<p>屏幕阅读器会把你的导航栏读成“表格第1行第1列”，表单控件对齐要靠 <code>line-height 硬调，小屏下无法切为上下堆叠——你得写 JS 切换 class 才能勉强适配。
- 现代项目中，
display: flex是唯一推荐起点，IE10+ 全支持 - 左栏稳定写法是
flex: 0 0 240px（不伸缩、不收缩、固定宽），比只写width: 240px更防内容撑开 - 右栏用
flex: 1+min-width: 300px，兼顾自适应和最小可读宽度
全屏不是拉伸，而是可控填充
所谓“全屏效果”，不是把内容强行塞满 100vw × 100vh，而是让视觉区域稳定覆盖可视区，同时保持比例与可读性。很多线上 bug 都源于混淆这两者：比如给表格加 height: 100vh 导致文字被截、给图片加 width: 100% 不配 height: auto 导致变形。
真正要盯住的，是三层控制点：容器高度链是否完整、宽度参照是否明确、内容溢出是否被合理约束（word-break、overflow、max-width）。少一个，全屏就只是个错觉。
