min-height 不起作用主因是未被触发，需父容器提供高度参考或使用 flex/grid 布局；绝对定位元素需自身设置 min-height；table 中应改用 height；避免 IE6 hack，优先排查布局逻辑。
min-height 不起作用，多数不是写错了属性，而是它没被“触发”——这个值只在内容撑不满时才生效，而它的计算又高度依赖父容器的尺寸、定位方式和布局模型。理解它和盒模型的关系，才能真正用好。
父元素没有明确高度参考，子元素百分比高度就失效
当子元素设 height: 50% 或 min-height: 100%，浏览器会去找父元素的 实际 height 值 来计算。如果父元素只是 min-height: 300px 而没设 height，那它的“计算高度”仍是 auto，子元素的百分比就无从算起，结果是 0 或无效。
- ✅ 正确做法：父元素加 height: 300px（固定）或 display: flex / grid（提供隐式高度上下文）
- ✅ 替代方案：用 display: flex 包裹父容器，flex 容器天然支持子项按百分比拉伸
- ⚠️ 注意：min-height: 100% 在 html/body 上必须先确保 html { height: 100% }，否则 100% 没有参照系
脱离文档流后，min-height 失去约束力
给父元素加 position: relative，再给子元素加 position: absolute，这时子元素已脱离文档流，不再参与父容器的高度计算。哪怕父元素设置了 min-height: 200px，子元素也不会被它限制，甚至可能溢出不可见。
- ✅ 解决办法：把 min-height 改到绝对定位元素自身上（如 .child { min-height: 200px; position: absolute; }）
- ✅ 或者改用 top/bottom 配合 height: auto 实现弹性占位
- ⚠️ 切记：绝对定位元素的高度不反向影响父容器，min-height 对它只是单向约束
table 布局中 min-height 本质无效
table 元素及其子元素（tr、td）对 min-height 是忽略的。它内部采用表格算法，高度由行高、内容、cell-spacing 等决定。但有个实用替代：直接设 height —— table 的 height 表现其实等同于 min-height：内容少时保持该高度，内容多时自动撑开。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：table { height: 200px; } 或 td { height: 60px; }
- ✅ 若需更灵活，建议用 display: table 模拟，再配合 flex/grid 控制外层
- ⚠️ 不要对 tr 设 min-height，它不会渲染，也不起作用
IE6 兼容写法容易掩盖真实问题
老资料里常见 _height: 500px 这种 IE6 hack，它只是用私有属性模拟 min-height 效果，并不能解决现代浏览器中的逻辑错误。现在遇到 min-height 不生效，优先排查布局结构，而不是套用 hack。
- ✅ 现代项目应检查：是否用了 flex/grid、父级是否有 height 参考、是否误用 absolute/fixed
- ✅ 开发时打开浏览器开发者工具，看 computed 栏里 height 和 min-height 是否被标记为 “inactive” 或 “overridden”
- ⚠️ 如果用了 Vue/React，注意组件根元素可能默认 display: block 且无高度上下文，需显式设置 layout 容器
