min-height 比 height 更适合动态内容，因其允许容器随内容自然增长，而 height 会强制固定高度导致截断或溢出；需配合 box-sizing: border-box、避免与 height 同用、在 Flex 中设 min-height: 0 以确保拉伸，并优先使用 100dvh 替代 100vh。
因为 min-height 允许容器随内容自然增长，而 height 会强制截断或溢出，对动态内容天然不友好。
height 会“卡死”容器高度，内容超量时无法自适应
给容器写 height: 300px，它就永远是 300px —— 不管里面是一行字还是二十张图片。超出部分默认 overflow: visible（溢出到外部），或被 overflow: hidden 静默裁掉。你无法靠内容把容器“撑开”，这是 CSS 规范定义的行为，不是 bug。
- 常见现象：后台表单字段被截半、卡片底部按钮消失、文章摘要只显示前两行
- 调试技巧：在 DevTools 的 Computed 面板里看
height值是否真等于你写的数值；临时改成height: auto，若内容恢复正常，基本就是它卡住的 - 特别注意：媒体查询中给
height加响应式规则后，常忘了在小屏下重置为auto，结果内容被硬截
min-height 提供底线保障，同时保留弹性伸缩能力
min-height 的语义是“至少这么高”，不是“恰好这么高”。它让容器在内容少时保持视觉完整性，在内容多时自动拉高，且不破坏文档流。
- 适合场景：CMS 文章区、用户评论列表、侧边栏、卡片式布局 —— 这些地方内容长度不可控
- 关键配合：
box-sizing: border-box必须加上，否则padding和border会额外撑高，导致实际高度 >min-height - 别和
height同时写在一个元素上：height会覆盖min-height，完全失去弹性效果
在 Flex 布局中，min-height 是子项拉伸的前提
Flex 容器设了 display: flex; flex-direction: column 后，仅给子项设 flex: 1 不够 —— Safari 和部分安卓 WebView 要求该子项还必须有 min-height: 0，否则它会沿用 min-height: auto 冻结高度计算，导致主内容区不拉伸、塌陷。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
.main { flex: 1; min-height: 0; } - 嵌套 Flex 容器更危险：外层设了
min-height: 100dvh，内层子项若也是flex: 1，它自己也得加min-height: 0 - 含
<img alt="为什么CSS的min-height比height更适合内容型容器？" >时额外注意：确保图片有height: auto，否则 Safari 无法估算最小高度，初始渲染仍塌
移动端视口单位要用 dvh，别信 100vh
min-height: 100vh 在 iOS Safari 中会包含地址栏高度，页面滚动时视口变化导致底部留白；100dvh（dynamic viewport height）才是真实可视区域，Safari 16.4+ 和 Chrome 100+ 已支持。
- 安全回退写法：
min-height: -webkit-fill-available（iOS 15+）或min-height: 100vh - 别直接给
html或body设min-height：某些安卓 WebView 会忽略，应作用于主布局容器（如#root或.app） - 慎用
@media (min-height: ...)：这个媒体查询在绝大多数移动端不可靠，别指望靠它切min-height值
真正容易被忽略的是：很多人以为设了 min-height 就万事大吉，却没检查父级是否阻断了高度传递，也没确认子元素有没有脱离文档流 —— 这些都会让 min-height 形同虚设。
