如何用CSS设置响应式页面的最小高度？

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。

1. 修复方法：向上追溯祖先链，确保至少一个父级有显式高度，例如 html, body { height: 100%; }
2. 更稳妥的做法是改用视口单位：min-height: 100vh（全屏）或 min-height: calc(100vh - 64px)（减去固定 header 高度）
3. iOS Safari 滚动时 vh 会缩放，此时优先用 min-height: 100dvh（Chrome 105+、Safari 16.4+ 支持）

在 Flex 容器里 min-height 失效怎么办？

Flex 子项默认 align-items: stretch，会强行拉高子元素高度，覆盖 min-height 设置。

1. 给子元素加 align-self: flex-start，再配 min-height 才有效
2. 如果父容器本身没高度，子项即使设了 min-height 也无参考基准；可尝试 min-height: 0 触发 flex 最小尺寸计算逻辑
3. 避免在 flex 子项上混用 height 和 min-height，容易互相干扰

响应式场景下怎么动态调整 min-height？

用媒体查询配合不同单位最灵活，别只靠单一值硬编码。

1. 移动端优先：min-height: 400px（固定值防塌陷）
2. 中屏以上：@media (min-width: 768px) { .main { min-height: calc(100vh - 80px); } }
3. 大屏适配：@media (min-width: 1200px) { .main { min-height: 600px; } }
4. 注意：不要对 min-height 做 transition 动画，它不支持过渡；要实现展开/收起效果，改用 max-height + overflow: hidden

最容易被忽略的是表格单元格（td、th）里的 min-height——它基本无效，得在外层包一层 div 再设；还有 modal 或 sidebar 这类局部滚动容器，设了 min-height 却没管 overflow，很容易触发双滚动条。