min-height 在小屏下不生效的根本原因是父容器无高度，如 html、body 未设 height 导致百分比计算为 0；需设 html, body { height: 100dvh; }，并注意 box-sizing、flex 行为及 display 类型影响。
min-height 为什么在小屏下不生效？
根本原因不是 min-height 失效，而是父容器没高度——比如写了 min-height: 100%，但 html 和 body 没设 height，导致百分比计算结果为 0。
- 必须显式设置
html, body { height: 100%; }或更稳妥的html, body { height: 100dvh; }（100dvh能响应 iOS 地址栏收起/展开） -
min-height: 100vh不依赖父级，但 Safari 在地址栏变化时可能卡在旧值，dvh是当前最优解 - 如果用百分比，得逐级检查所有父容器是否都设了明确高度（不能是
height: auto）
box-sizing: border-box 对 min-height 的实际影响
min-height 默认只约束内容区（content area），padding 和 border 会额外加高。你写 min-height: 300px，加上 padding: 20px，总高其实是 340px——容易误判“怎么还是不够高”。
- 加
box-sizing: border-box后，min-height: 300px就真指整个盒子（含 padding + border）最小高 300px - 务必全局重置：
* { box-sizing: border-box; }，否则个别元素漏设会导致布局错位 - 注意：即使用了
box-sizing: border-box，flex 子项仍可能被压缩，需额外加flex-shrink: 0
Flex 容器里 min-height 被忽略怎么办？
flex 子项默认受 align-items: stretch 影响，会强行拉高到父容器高度，掩盖 min-height 效果——尤其当父容器有固定高度时。
- 给子项加
align-self: flex-start，或统一给父容器设align-items: flex-start - 如果父容器本身是
height: auto，子项本应随内容撑开；但只要父容器写了height: 300px，align-self: flex-start只控制对齐，不改变子项自身高度逻辑 - flex 子项若同时设了
flex: 1，会优先按 flex 分配空间，min-height可能被压制，此时要显式加flex-shrink: 0
哪些场景下 min-height 根本不生效？
不是所有元素都能响应 min-height，常见失效点集中在 display 类型和文档流脱离上。
- 行内元素（如
<span></span>、<a></a>）直接忽略min-height，必须先加display: inline-block或display: block - 绝对定位（
position: absolute）或浮动（float）的子元素脱离文档流，父容器高度塌陷，min-height看起来“无效”，实则是父容器自己没高度 - 表格单元格（
<td>、<code><th>）对 <code>min-height支持差，IE 基本不认，建议改用 div + flex 模拟表格布局 - 同时写了
height和min-height：若height值小于min-height，最终取min-height；若想固定高就别配min-height，想自适应就只留min-height
真正麻烦的不是属性本身，而是它依赖的上下文——父容器高度、display 类型、flex 行为、甚至 iOS 地址栏动效都会让它表现不一致。调试时先看 computed 样式里 min-height 是否被解析，再一层层往上查父级高度和 display 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
