Flex布局天然支持子项等高，父容器设display: flex即可实现；需注意清除浮动、设置box-sizing: border-box、避免height: 100%及IE兼容性问题。
flex实现等高列最直接有效
Flex布局天然支持子项等高，只要父容器设为 display: flex，所有直接子元素（列）就会自动拉伸到同一高度，无需额外计算或 hack。
常见错误是忘记清除浮动或设置 flex-direction 导致换行破坏布局；另外，如果列内有 margin-bottom 或 padding-bottom 过大，可能让内容溢出但视觉上仍“等高”，需配合 box-sizing: border-box 控制。
示例结构：
.container {
display: flex;
}
.col {
flex: 1; /* 等宽等高 */
padding: 1rem;
box-sizing: border-box;
}- 若需响应式断行，用
flex-wrap: wrap+min-width控制列最小宽度 - 避免对子项设
height: 100%，这反而可能触发循环依赖导致渲染异常 - IE10–11 对
flex支持不完整，flex: 1需写全flex: 1 1 0才可靠
伪元素方案本质是视觉欺骗
所谓“伪元素实现等高列”，其实是利用 ::before 或 ::after 在列底部生成一个绝对定位的占位块，把背景色或边框“撑满”容器高度。它不改变实际内容高度，只是让视觉上看起来等高。
立即学习“前端免费学习笔记（深入）”；
这种做法只适用于纯背景、无交互、无下边距需求的静态展示场景；一旦列内有按钮、链接或需要底部对齐的内容，就容易错位。
关键点：
- 父容器必须设
position: relative - 伪元素需设
position: absolute; top: 0; bottom: 0; width: 100% - 各列伪元素的
z-index要低于内容，否则遮挡文字或点击区域
什么时候不该用 flex 实现等高
当列内容高度差异极大，且需要内部滚动（比如左栏菜单固定、右栏内容长需独立滚动），flex 会让整个容器被最长列撑开，失去局部滚动能力。
此时更合理的做法是：
- 给需要滚动的列单独设
overflow-y: auto和固定max-height - 放弃“物理等高”，改用 JS 监听
resize动态同步高度（仅在必须严格对齐时考虑） - 用
grid替代：设display: grid; grid-template-rows: 1fr同样能等高，且对滚动更友好
兼容性与性能的实际取舍
现代项目首选 flex，95%+ 浏览器支持良好；伪元素方案在 IE8–9 中可用，但维护成本高、语义差，现在基本无必要。
真正容易被忽略的是：flex 等高会强制子项最小高度为 min-content，如果某列内容为空但设置了 min-height，它仍会占据空间——这时得靠 align-items: flex-start 或显式设 min-height: 0 来修正。
