你知道吗？HTML 左右两栏高度不一致，通常并不是 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 技巧来模拟等高视觉效果 - 相比
width: 250px，使用flex: 0 0 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 布局中的表现往往不如 gap 稳定直观
真正需要思考的，并不是“怎么强制让左右两栏一样高”，而是页面是否真的有必要这样做。对于大多数实际业务场景来说，内容优先、结构语义清晰、阅读体验自然，往往比视觉上的绝对对齐更重要。强行实现左右等高布局，通常意味着要额外承担兼容性、可维护性以及可访问性方面的成本。
