Flexbox 是最直接可靠的等高方案，父容器设 display: flex 后子 div 默认等高；Grid 需定义行轨道或显式 align-items: stretch；table-cell 语义错误且响应式差；JS 仅作极端补位。
用 Flexbox 让多个 div 等高最直接
Flexbox 是目前最可靠、最简洁的等高方案，无需 JS、不依赖内容高度、天然响应式。父容器设 display: flex 后，所有子 div 默认拉伸到同一高度。
常见错误是只给子元素设 height: 100%，但没处理父级高度来源——Flexbox 自动解决这个依赖链。
实操建议：
- 父容器加
display: flex，子div不需额外样式（默认align-items: stretch） - 若子元素内有
margin或padding影响视觉对齐，用box-sizing: border-box统一盒模型 - 避免在子
div上写死height或min-height，否则可能破坏等高逻辑 - 兼容性够用：Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+；IE10/11 需用
display: -ms-flexbox前缀（但行为略有差异）
Grid 布局中用 align-items: stretch 实现等高
CSS Grid 在多列等高场景下更结构化，尤其适合卡片网格、仪表盘布局。和 Flexbox 类似，等高是 Grid 的默认行为，但触发条件不同：必须明确定义行轨道（grid-template-rows）或让子项跨行（grid-row: 1 / -1）。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是只写 display: grid + grid-template-columns，却没约束行高，此时子项仍按自身内容撑开。
实操建议：
- 父容器设
display: grid和grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，再加align-items: stretch（虽默认，显式写出更清晰） - 若某子
div内容过少导致高度塌缩，加min-height: 0防止 Grid 轨道收缩（尤其内部有flex或grid时） - 不要用
height: 100%强制拉伸——Grid 子项在未指定行轨道时，百分比高度无效
不用现代 CSS？慎用 display: table-cell
这是老式等高方案，原理是模拟表格单元格行为。它确实能强制等高，但语义错误、响应式困难、嵌套受限，仅建议用于必须兼容 IE8–9 的遗留系统。
典型问题包括：无法与 flex 或 grid 混用；vertical-align 会影响基线对齐；width 行为反直觉（需配合 table-layout: fixed）。
实操建议：
- 父容器设
display: table、table-layout: fixed、width: 100% - 每个子
div设display: table-cell、vertical-align: top - 必须为每个子项设
width（如width: 33.333%），否则宽度会不均 - 移动端断点需重写整套 display 规则，维护成本高
JavaScript 补位只在极端场景下考虑
纯 CSS 方案失效时才用 JS，比如动态加载内容后高度突变、或需要兼容极老浏览器且无法改 HTML 结构。但每次 DOM 变化都得重新计算，易引发重排、性能差、SSR 不友好。
最常被忽略的是 resize 监听遗漏——窗口缩放、字体加载完成、图片异步渲染都会改变高度，但很多人只在初始化时跑一次 JS。
实操建议：
- 用
ResizeObserver替代window.addEventListener('resize')，精准监听目标元素尺寸变化 - 取高度时用
getBoundingClientRect().height，而非offsetHeight（后者含 border，且可能受 zoom 影响） - 批量更新：收集所有待等高元素，取最大值后统一设
min-height，而非逐个设height（避免强制同步布局） - 服务端渲染（SSR）页面首次加载时，JS 还未执行，用户会看到不等高的闪屏——需配合骨架屏或 CSS fallback
真正复杂的不是怎么实现等高，而是判断「是否真的需要等高」：很多设计稿里的“等高”其实只是视觉错觉，用 padding-bottom 配合背景色就能模拟，没必要强求 DOM 层面一致。
