min-height生效需父容器放行，常见失效原因有三：父容器设height/max-height限制、flex布局中align-items:stretch拉伸子项、绝对定位导致包含块高度不足。
min-height 生效的前提不是“写了就起作用”，而是父容器得放行——它本质是一条底线，不是增高指令。
为什么 min-height: 300px 看着没效果？先查这三处
常见错误现象：min-height: 300px 在 DevTools 里显示已计算，但元素仍扁平、内容被截、滚动条不出现。
- 父容器设了
height: 200px或max-height: 200px—— 子元素再想撑也突破不了上限 - 父容器是
display: flex且没改align-items，子项默认被stretch拉满，min-height只有在父容器高度不足时才“有机会”起作用 - 子元素用了
position: absolute，它的包含块可能不是视觉上的父级，而是第一个非static定位祖先；此时min-height只在这个包含块内生效，而该块本身可能很矮
min-height 和 height 同时写，谁说了算？
行为很明确：height 是硬指令，min-height 是保底线。两者共存时：
- 若
height: 150px且min-height: 200px，浏览器会以min-height为准（因为height小于min-height） - 若
height: 250px且min-height: 200px，height直接胜出，min-height形同虚设 - 写成
height: 120px; min-height: 120px属于冗余操作，后期只改其中一个值就可能意外破坏布局
正确做法：需要弹性高度时，只写 min-height，确保 height 是默认的 auto（不用显式声明）。
立即学习“前端免费学习笔记（深入）”；
移动端用 min-height: 100vh 要小心键盘和 dvh
iOS Safari 旧版本（iOS 12 及更早）在软键盘弹出时，vh 不会重算，导致 min-height: 100vh 的容器实际高度远超屏幕，底部留大片不可滚动空白。
- 现代解法：优先用
min-height: 100dvh（dynamic viewport height），iOS 16.4+、Chrome 105+、Firefox 114+ 均支持 - 兼容写法：叠加声明，后写的生效 ——
min-height: 100vh; min-height: 100dvh; - 注意：大量使用
100vh/100dvh会增加视口 resize 时的重排开销，低端 Android 设备上横竖屏切换可能卡顿
Flex 容器里子元素不随内容撑高？改 align-items 就行
Flex 项默认 align-items: stretch，哪怕你只写了一行文字，它也会被拉到父容器全高——这不是 min-height 失效，是它根本没被触发。
- 让子项恢复“内容决定高度”：给父容器加
align-items: flex-start，或给子项单独加align-self: flex-start - 如果父容器本身高度为
auto，子项仍会随内容撑开；但如果父容器有固定高度（如height: 300px），那flex-start只控制对齐，不改变子项自身高度逻辑
真正容易被忽略的是：空容器本身没有渲染高度，min-height 不是“让空盒子变高”的万能开关——它只在内容区存在可测量依据时才有意义；没内容、没边框、没 padding、没伪元素，min-height 就只是个静默的守门员。
