min-height不是让元素变高的魔法开关，而是为内容设底线：内容少时兜底，内容多时放行；真没撑开，90%因父级锁死高度，如设height/max-height、flex拉伸或absolute定位导致包含块过矮。
min-height 不是“让元素变高”的魔法开关，而是给内容一条底线：内容少时兜底，内容多时放行。真没撑开，90% 是父级在暗中锁死。
为什么写了 min-height: 100vh 却还是压扁了？
常见错误现象：min-height: 100vh 在 DevTools 里显示已计算，但元素高度明显不足、内容被截、滚动条不出现。
- 父容器设了
height: 200px或max-height: 200px—— 子元素再想撑也突破不了上限 - 父容器是
display: flex且没改align-items，子项默认被stretch拉满，min-height根本没机会触发 - 子元素用了
position: absolute，它的包含块可能不是视觉上的父级，而是第一个非static定位祖先；此时min-height只在这个包含块内生效，而该块本身可能很矮
min-height: 100vh 和 min-height: 100dvh 怎么选？
移动端必须区分清楚：iOS Safari 在软键盘弹出时，旧版 vh 不重算，导致容器实际高度远超屏幕，底部留大片空白。
- 现代首选：
min-height: 100dvh（iOS 16.4+、Chrome 105+、Firefox 114+ 支持） - 兼容写法：叠加声明，后写的生效 ——
min-height: 100vh;min-height: 100dvh - 注意：
100vh/100dvh大量使用会增加视口 resize 时的重排开销，低端 Android 设备横竖屏切换可能卡顿
Flex 布局里 min-height 为啥像没写一样？
不是失效，是它根本没被触发。Flex 项默认 align-items: stretch，哪怕只有一行文字，也会被拉到父容器全高。
- 让子项恢复“内容决定高度”：
align-items: flex-start（作用于父容器），或align-self: flex-start（作用于子项） - 若要子项占满剩余空间，别靠
min-height，用flex-grow: 1 - 外层
display: flex; flex-direction: column; min-height: 100vh+ 内层flex-grow: 1才能真正撑开并支持内容溢出滚动
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 的生效前提是父容器不设 height、不强制 flex 拉伸、不脱离文档流——它不是向上突破的锤子，而是向下托底的手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
