Flex布局是实现两列等高最简单可靠的方式，通过display: flex使子项自动等高拉伸，无需设置高度或依赖内容顺序，兼容现代浏览器。
flex布局实现两列等高最简单可靠
Flex是目前实现两列等高最直接、语义清晰、浏览器兼容性足够（Chrome 29+/Firefox 28+/Safari 6.1+）的方式，不需要计算高度，也不依赖内容顺序。
关键在于把容器设为 display: flex，子项默认拉伸填满交叉轴（即高度方向）：
`.container {
display: flex;
}
.left, .right {
/* 不需要设置 height，自动等高 */
}- 如果某列有
min-height或内容撑开，另一列会同步拉伸——这是 flex 的默认行为，无需额外干预 - 避免对子项设置
height: 100%，这反而可能破坏 flex 的自然拉伸逻辑 - IE10–11 对 flex 支持有 bug（比如
flex: 1在某些嵌套下失效），如需兼容，建议加flex-basis: 0或用flex: 1 1 auto
绝对定位模拟等高只适用于静态高度场景
用 position: absolute 把两列都拉到父容器顶部并设相同 height，看起来“等高”，但本质是强制固定高度，不是响应式等高。
典型写法是给父容器 position: relative，再让子元素脱离文档流：
立即学习“前端免费学习笔记（深入）”；
`.container {
position: relative;
height: 400px; /* 必须显式设高 */
}
.left, .right {
position: absolute;
top: 0;
width: 50%;
}
.left { left: 0; }
.right { right: 0; }- 一旦内容超出预设
height，文字会被裁切或溢出，无法自适应 - 父容器必须有明确高度，不能是
height: auto，否则绝对定位元素无法参考 - 不适合响应式设计，也不能配合
min-height或动态内容使用
不要用 float + 负 margin 模拟等高
老式“圣杯布局”或“双飞翼”里靠负 margin 和 padding 拉伸背景的做法，本质是视觉欺骗，实际 DOM 高度并不相等。
常见错误现象包括：
- 右侧列内容多时，底部内容被左侧浮动元素遮盖（
float脱离文档流） - 父容器高度塌陷，需要额外清除浮动（
clear: both或伪元素），但依然不解决真实高度差异 -
overflow: hidden强制包裹会导致内部position: absolute元素定位异常
这种方案现在既无必要，也难维护，现代项目中应明确规避。
兼容性差的场景优先降级为 flex + fallback
如果必须支持 IE9 及更早版本（已基本淘汰），flex 不可用，此时真正的“等高”在 CSS 层面无法原生实现，只能接受 JS 补偿或结构妥协。
- 纯 CSS 方案只剩
display: table-cell，但语义失当、响应式困难、IE8+ 才支持，且无法与flex或grid混用 - JS 方案推荐监听
resize和 DOM 变化后，用Math.max()计算两列offsetHeight并统一设min-height，而非直接改height - 更务实的做法：承认 IE9– 的局限，用媒体查询或
@supports仅对现代浏览器启用 flex，旧浏览器接受视觉不完全对齐
真正容易被忽略的是：所谓“等高”，多数时候要的是视觉一致和背景延伸，而不是 DOM 高度数值相等。flex 的拉伸满足了前者，而执着于后者往往意味着设计或结构本身需要重新评估。
