min-height百分比失效的根本原因是父容器无明确高度，导致浏览器无法计算基准；需确保html/body设height:100%或用100vh/100dvh，Flex中要避免align-items:stretch覆盖，并慎用table单元格。
直接用 min-height 就行，但必须避开几个常见失效点——比如父容器没高度、用了 height 冲突、或在 flex 里被拉伸覆盖。
min-height 百分比值为什么经常不生效？
百分比 min-height（如 min-height: 80%）依赖父容器的「明确高度」。如果父容器是 height: auto 或没设高度，浏览器无法计算百分比基准，结果等同于 min-height: auto。
- 修复方法：向上追溯祖先链，确保至少一个父级有显式高度，例如
html, body { height: 100%; } - 更稳妥的做法是改用视口单位：
min-height: 100vh（全屏）或min-height: calc(100vh - 64px)（减去固定 header 高度） - iOS Safari 滚动时
vh会缩放，此时优先用min-height: 100dvh（Chrome 105+、Safari 16.4+ 支持）
在 Flex 容器里 min-height 失效怎么办？
Flex 子项默认 align-items: stretch，会强行拉高子元素高度，覆盖 min-height 设置。
- 给子元素加
align-self: flex-start，再配min-height才有效 - 如果父容器本身没高度，子项即使设了
min-height也无参考基准；可尝试min-height: 0触发 flex 最小尺寸计算逻辑 - 避免在 flex 子项上混用
height和min-height，容易互相干扰
响应式场景下怎么动态调整 min-height？
用媒体查询配合不同单位最灵活，别只靠单一值硬编码。
立即学习“前端免费学习笔记（深入）”；
- 移动端优先：
min-height: 400px（固定值防塌陷） - 中屏以上：
@media (min-width: 768px) { .main { min-height: calc(100vh - 80px); } } - 大屏适配：
@media (min-width: 1200px) { .main { min-height: 600px; } } - 注意：不要对
min-height做transition动画，它不支持过渡；要实现展开/收起效果，改用max-height+overflow: hidden
最容易被忽略的是表格单元格（td、th）里的 min-height——它基本无效，得在外层包一层 div 再设；还有 modal 或 sidebar 这类局部滚动容器，设了 min-height 却没管 overflow，很容易触发双滚动条。
