min-height生效需父容器不强制限制高度；常见失效原因有父容器设height/max-height、flex拉伸、绝对定位脱离文档流；与height共存时，取较大值；移动端优先用100dvh。
min-height 生效的前提是：父容器得“松手”，别用 height、flex 拉伸或定位把子元素锁死。 它不是万能增高剂，而是一条底线——内容少时兜底，内容多时放行。真要撑不开，90% 是父级在暗中干预。
为什么写了 min-height 却没效果？先查这三处
常见错误现象：min-height: 300px 在 DevTools 里显示已计算，但元素看着还是扁扁的、内容被截、滚动条不出现。
- 父容器设了
height: 200px或max-height: 200px—— 子元素再想撑也突破不了上限 - 父容器是
display: flex且没改align-items，子项默认被stretch拉满，min-height只有在父容器高度不足时才“有机会”起作用 - 子元素用了
position: absolute，它的包含块（containing block）可能不是视觉上的父级，而是第一个非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 - 如果父容器本身
height: auto，那子项本来就会撑；但如果父容器有固定高度（比如height: 400px），flex-start只控制对齐位置，不影响子项自身高度逻辑 - 避免在 flex 子项上同时写
height: 100%和min-height，百分比高度依赖父容器有明确高度，否则计算为 0，语义混乱
真正容易被忽略的是：min-height 的“最小”只对内容高度起作用，它不解决父容器塌陷、不绕过 flex 拉伸、也不修复绝对定位脱离文档流的问题——这些都得从布局根因下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
