根本原因是容器实际高度不一致，背景色仅渲染到元素真实高度范围；flex布局需父容器有明确高度基准且子项禁用height:auto和flex:0 0 auto，grid布局须将背景设在grid item而非容器上。
多列等高时背景色不齐，根本原因是高度没真正“拉齐”
常见现象是：三列并排，内容高度不同，但每列都设了 background-color，结果视觉上背景色在底部参差不齐——这不是颜色没生效，而是容器本身高度不一致。CSS 中的背景色只渲染到元素实际高度范围，哪怕你写了 height: 100%，若父容器没明确高度或未触发 BFC，它照样塌陷。
flex 布局下 background-color 自动等高，但得避开这些坑
用 display: flex 是最直接的解法，但容易忽略几个关键点：
- 父容器必须有明确的高度来源（比如
min-height: 400px或height: 100vh），否则子项的“等高”无基准 - 子项不能写
height: auto同时又设overflow: hidden——这会截断内容，但背景色仍只铺满截断后的区域 - 如果子项里有浮动元素或绝对定位内容，可能撑不开自身高度，导致背景色只覆盖文字区域，留白处透明
- 别给子项设
flex: 0 0 auto，这会禁用拉伸；要等高就得允许它 grow，至少写flex: 1或flex: 1 1 auto
grid 布局更干净，但 background-color 要落在 grid item 上
display: grid 天然支持等高列，但背景色不能只设在 grid 容器上——那只是整块区域的底色。真正要设背景的是每个 grid-item：
- 确保每列容器（如
<div class="col">）是直接 grid item，而不是嵌套在另一层 div 里 <li>避免在 item 内部再用 float 或 inline-block，否则内部高度计算可能脱钩</li> <li>如果列宽用 <code>fr单位（如grid-template-columns: 1fr 1fr 1fr），背景色会随列宽自适应，无需额外 width 控制 - 注意
gap不会影响背景色连续性——它只是空白间隙，两侧 item 的背景各自渲染，不会“跨 gap 连续” - 给
table-cell元素设background-color是有效的，但若其内部有<td> 或 <code><th>，且这些单元格自己也设了背景，就会盖住外层 cell 的背景 <li>别依赖 <code>col或colgroup的background-color来统一列背景——它在 Safari 和 Firefox 中基本不渲染，Chrome 里也只作用于空白区，不可靠 - 如果用了
border-collapse: collapse，记得检查边框是否遮挡了背景色边缘；加padding比调border更安全 - 真正稳妥的做法：把背景色写在
table-cell的 div 上，内容用padding隔开，而不是塞进td里再套一层样式
table 布局兼容老浏览器，但 background-color 易被 td/th 覆盖
用 display: table 和 table-cell 确实能强制等高，但表格语义和样式继承容易出岔子：
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的一点：背景色“看起来等高”，不等于 DOM 高度真等高。用开发者工具选中元素，看 computed height 是否一致——很多情况下，视觉对齐靠的是 padding 或伪元素撑开，而非真实 content-box 高度。真要跨浏览器稳定，优先选 flex + min-height，其次 grid，最后才是 table 模拟。其他方案要么兼容性窄，要么维护成本高。
