左右栏高度不一致不是bug而是CSS默认行为，需依布局模型主动干预：flex下用align-items:start解除拉伸，grid中同样关闭align-items:stretch，float中避免height:100%依赖父高，伪等高技巧成本高，业务场景应优先内容语义而非视觉对齐。
左右栏高度不一致不是 bug，是 CSS 默认行为——它们各自撑开高度，彼此无关。想视觉上“等高”，必须主动干预，但方式取决于你用的布局模型和兼容性要求。
flex 布局下右栏内容少时左栏被拉长？
这是 align-items: stretch 的默认行为，不是错误。它让所有子项在交叉轴（这里是垂直方向）上拉满容器高度，导致左栏背景色向下延伸，而右栏内容空荡荡。
- 显式设
align-items: start即可解除拉伸，两栏按各自内容高度渲染 - 如果真需要背景色对齐（比如同色块分隔），别依赖自动等高，改用
background-color设在父容器上，再用overflow: hidden配合伪元素或 padding 技巧“模拟”等高效果 -
flex: 0 0 250px比width: 250px更安全：它禁用缩放，避免左栏因父容器变窄或右栏撑开而意外压缩
float 布局里 height: 100% 不生效？
百分比高度只对“有明确高度的父元素”有效。height: 100% 在浮动子项上失效，是因为父容器高度是 auto，浏览器无法计算基准值。
- 要么给父容器设固定高度（如
height: 600px），但这不适用于内容动态变化的场景 - 要么用
html, body { height: 100% }+.container { height: 100% }向下透传，但依然受限于文档流高度不可控 - 更现实的做法是放弃等高幻想：用伪等高技巧（大 padding + 负 margin +
overflow: hidden）骗出视觉一致性，但维护成本高、易出错
grid 布局默认等高反而坏事？
Grid 的 align-items: stretch 是开箱即用的，但常导致左栏被右栏“带高”，尤其当右栏内容多、左栏只是图标+标题时，视觉失衡明显。
立即学习“前端免费学习笔记（深入）”；
- 加
align-items: start关掉自动拉伸，各栏回归内容真实高度 - 别给 grid 子项写
width: 100%或height: 100%，这会和轨道定义冲突，可能引发横向滚动或错位 - 间隙统一用
gap: 1rem，别靠margin模拟，后者在 grid 中行为不稳定
真正难的不是“怎么让它们看起来一样高”，而是判断是否真的需要等高——多数业务场景里，内容优先、语义清晰比视觉对齐更重要；强行等高往往要付出兼容性、可维护性或可访问性的代价。
