flexbox 实现多列等高最省心：父容器设 display: flex 后子元素默认等高；grid 需明确设置 grid-template-rows 才能等高；table-cell 适合 ie 兼容；避免 float 等 hack 方案。
Flexbox 实现多列等高最省心
父容器设 display: flex 后，子 div 默认就等高，不用写 height: 100%，也不用管父级有没有高度——Flexbox 自动处理了这个依赖链。
常见错误是只给子元素加 height: 100%，但父容器没设高度或没用 Flex/Grid，结果完全不生效。
- 父容器必须加
display: flex（或display: -ms-flexbox兼容 IE10/11） - 子
div不要设height、min-height或flex-shrink: 0，否则可能破坏拉伸逻辑 - 若子元素内有
margin导致视觉错位，统一加box-sizing: border-box - Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+ 原生支持；IE10/11 需前缀，且
align-items行为略有差异
Grid 布局中 align-items: stretch 不等于自动等高
align-items: stretch 是 Grid 的默认值，但仅当行轨道被明确定义时才真正触发等高。如果只写了 grid-template-columns 却没设 grid-template-rows，子项仍按内容撑开，看起来并不等高。
典型误用：用 display: grid + grid-template-columns: 1fr 1fr 就以为万事大吉，结果两列高度完全不一致。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须配合
grid-template-rows: 1fr（单行）或grid-template-rows: repeat(1, 1fr)才能强制等高 - 若某子
div内部又用了 Flex 或 Grid，加min-height: 0防止它塌缩（Grid 轨道会收缩） - 避免在子项上写
height: 100%——此时百分比无效，因为 Grid 子项没有“继承的高度来源”
display: table-cell 适合老项目兼容
当必须支持 IE10+ 且不能用 JS 时，display: table-cell 是少数仍可靠的选择，它天然具备单元格等高特性，语义虽不理想，但行为稳定。
注意这不是用 <table> 标签，而是纯 CSS 模拟，所以不影响 HTML 结构语义。
<ul>
<li>父容器设 <code>display: table、width: 100%、border-collapse: collapse
div 设 display: table-cell、vertical-align: top
width: 33.33% 或 width: 200px 等固定值，不能混用 flex 或 grid
table-cell 不支持 minmax() 或 auto-fit，换行需额外包裹逻辑别碰 float + 负 margin 这套“伪等高”方案
靠 padding-bottom: 9999px + margin-bottom: -9999px + overflow: hidden 撑背景色，本质是视觉欺骗——内容区域实际高度不一致，只是背景色被拉长了而已。
一旦加了边框、阴影、或需要精确计算位置（比如 position: absolute 定位），立刻露馅。
- 无法真正对齐底部内容（比如右下角按钮），因为物理高度不同
- 父容器
overflow: hidden会剪掉弹出类元素（如 tooltip、dropdown） - 维护成本高：改一个 padding 就得同步调 margin，数值稍错就崩
- 现代项目里，这套方案只剩历史代码迁移时被动兼容的价值
真正难的不是选哪种方案，而是意识到：等高不是样式问题，而是布局模型选择问题。一旦用了 Flex 或 Grid，等高就是默认行为；反过来，硬要在块级流里靠 hack 强行模拟，只会越调越歪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
