Flexbox 是实现等高列最可靠方案，父容器需设 min-height 提供高度基准，子项默认拉伸；Grid 通过 align-items: stretch 天然支持等高；table-cell 语义错误且响应式差；JS 补救仅限 IE9 及以下。
用 display: flex 实现真正可靠的等高列
Flexbox 是目前最直接、语义清晰且浏览器兼容性足够好的方案。父容器设为 display: flex 后，子项默认拉伸填满交叉轴（即高度），无需 JS 或 hack。
常见错误是只加了 display: flex 却忘了设父容器最小高度，导致内容少时列看起来“不等高”。实际是它们等高了，只是父容器没撑开。
- 父容器必须有明确的
min-height或由内容/外部约束提供高度上下文（比如设height: 100vh） - 子列不需要额外设
height: 100%，flex 默认已拉伸 - 若需某列不拉伸，加
align-self: flex-start - IE10–11 需加
-ms-flex前缀，但仅限基础等高；align-self在 IE 中行为不稳定
.container {
display: flex;
min-height: 300px; /* 关键：提供高度基准 */
}
.col {
flex: 1; /* 等宽；如需不等宽，改用 flex: 2 / flex: 1 */
}Grid 布局中 align-items: stretch 的默认行为
CSS Grid 天然支持等高列——只要子项没显式设置 height 或 align-self 覆盖，默认就拉伸填充行高。比 Flex 更适合二维布局场景（比如带页眉/页脚的完整页面）。
容易被忽略的是：Grid 的等高依赖于“行轨道”的定义。如果用 grid-template-rows: auto，那行高由最高列决定，其他列自然等高；但如果用了 minmax(0, 1fr) 或 1fr，效果一样，但逻辑不同。
立即学习“前端免费学习笔记（深入）”；
- 避免对子列设
height: 100%，这会破坏 stretch 行为 - 若列内有绝对定位元素，需确保其父列有
position: relative，否则可能溢出 - Firefox 对
minmax(0, 1fr)的处理更严格，能更好应对内容为空的情况
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 不需要指定行高，auto 即可 */
}为什么不要用 display: table-cell 模拟等高列
虽然 table-cell 在视觉上能让列等高，但它带来三类硬伤：语义错误、响应式断裂、嵌套受限。
典型现象是：加了 width: 100% 后列宽失控，或媒体查询里改 display 时整个布局塌陷。更隐蔽的问题是，table-cell 无法与 Flex/Grid 混合使用，一旦后续要加滚动区域或动态插入内容，就得重写。
- 无法响应式隐藏某列（
display: none会破坏 table 布局流） - 子元素设
margin会被忽略，必须用padding或 wrapper - 在 Safari 旧版本中，
vertical-align: top可能失效，导致顶部不对齐
JavaScript 补救方案只应在极端兼容需求下启用
只有当目标环境明确包含 IE9 及以下，且无法升级 CSS 方案时，才考虑 JS 计算。现代项目中，这类代码已成为技术债。
核心逻辑是遍历列，取最大 offsetHeight，再统一赋值给所有列的 minHeight。但要注意：窗口缩放、动态加载内容、字体加载完成（FOIT/FOUT）都会让高度变化，需监听 resize 和 DOMContentLoaded，甚至 fontload 事件。
- 不要直接设
style.height，否则会固定死高度，阻碍响应式流动 - 优先用
minHeight，并确保单位是px（避免百分比循环依赖） - 若列内有图片，需等
img.onload后再计算，或用IntersectionObserver监听加载完成
真正难处理的不是代码本身，而是高度计算时机 —— 它永远比你以为的晚一步。
