min-height在小屏下失效的根本原因是父容器无明确高度，导致百分比值计算为0；需确保html/body设height:100%或100vh，优先用100dvh兼容iOS地址栏变化，并配合box-sizing:border-box和flex-shrink:0保障生效。
min-height 为什么在小屏下失效？
常见现象是写了 min-height: 400px，但在手机上盒子还是塌成一条线。根本原因不是属性不生效，而是父容器没高度——min-height: 100% 这类百分比值依赖父级有明确高度，而默认情况下 html 和 body 没设高，导致百分比计算结果为 0。
- 先确保
html和body有高度：加height: 100%或height: 100vh - 如果用
min-height: 100%，必须逐级检查所有父容器是否都设置了高度 - 更稳妥的写法是直接用视口单位：
min-height: 100vh，它不依赖父级，但要注意 iOS Safari 中vh在地址栏收起/展开时可能不准
box-sizing: border-box 对 min-height 的影响
min-height 只作用于内容区（content area），padding 和 border 会额外增加元素总高度。如果你希望“整个盒子”至少高 300px，又加了 padding: 20px，那实际内容区只需 260px 就够——但人眼看到的是 300px 总高，容易误判。
- 用
box-sizing: border-box后，min-height: 300px就真指整个盒子最小高 300px，含 padding 和 border - 务必全局重置：
* { box-sizing: border-box; }，避免个别元素漏设导致高度错乱 - 注意：flex 容器子项即使设了
box-sizing: border-box，仍受flex-shrink: 1影响，可能压缩到低于min-height，需额外加flex-shrink: 0
响应式场景下怎么选单位？
固定像素（px）在小屏上容易撑出横向滚动条，纯百分比又受限于父级，真正灵活的是组合用法。
- 单页主区域常用：
min-height: 100vh，但 iOS 上可加兜底：min-height: 100%; min-height: 100vh（后者覆盖前者） - 卡片或模块类容器推荐：
min-height: min(300px, 80vh)，既保底 300px，又防大屏拉太高 - 文字容器慎用
vh：字体缩放或系统字号放大时，vh不随文本变大，可能导致截断，此时min-height: 20em更可靠
IE6/7 兼容怎么处理？
现代项目基本不用管 IE6，但如果真要兼容，min-height 在 IE6 下完全无效，只能靠 hack。
立即学习“前端免费学习笔记（深入）”；
- IE6 下用
height模拟：height: auto !important; height: 200px; min-height: 200px;—— IE6 忽略!important后面的height，但识别第一个height；其他浏览器优先用min-height - 更干净的做法是用 JavaScript 检测：
if (!document.documentElement.style.minHeight) { el.style.height = '200px'; } - 注意：IE7+ 已支持
min-height，无需 hack，只对 IE6 单独处理即可
真正容易被忽略的点是：flex 布局中 min-height 生效的前提是父容器设了 display: flex 且子项没被 flex-shrink 强行压扁——这个收缩行为比 min-height 优先级还高。
