height会“卡死”布局，因为它强制固定高度，内容超量时既不自适应增高也不自动触发滚动，只能靠overflow控制溢出行为；而min-height才支持弹性伸缩。
为什么直接用 height 会让布局“卡死”
当你给一个容器写 height: 300px，它就真的只会是 300px —— 不管里面塞了 1 行字还是 50 行。内容超了，要么溢出（overflow: visible），要么被裁（overflow: hidden），要么滚动（overflow: auto），但父容器本身绝不会变高。这在 CMS 页面、用户评论区、后台表单等动态内容场景里，极易导致视觉断裂或交互异常。
常见错误现象包括：
- 底部 footer 被内容顶开，或反而“浮”在半空
- 背景色/边框只覆盖前几行，后面内容裸露在白底上
- Flex 子项被压缩到 0 高度（尤其
flex-direction: column下没设min-height）
min-height 怎么用才不翻车
核心原则：用 min-height 替代 height，但必须配合内容行为和父级约束一起考虑。不是所有地方加个 min-height: 200px 就万事大吉。
关键实操点：
- 对内容主区域（如
.content、main）设min-height，而不是对整个页面根容器硬套min-height: 100vh—— 后者在内容极少时会撑满一屏，但内容多时又可能造成双滚动条 - 若用 Flex 布局，确保父容器有
display: flex; flex-direction: column，再给目标子元素加flex-grow: 1和min-height，否则min-height可能被忽略 - 避免同时写
height和min-height在同一个元素上 ——height会覆盖min-height，起不到弹性效果 - 移动端慎用
100vh：iOS Safari 地址栏收起时vh会突变，推荐改用100dvh（Chrome 100+/Safari 16.4+ 支持）
搭配 max-height 控制“疯长”边界
只设 min-height 能防塌陷，但挡不住内容爆炸式增长。比如一个可折叠的详情面板，内容可能从 2 行涨到 200 行 —— 这时候得加个上限。
典型组合写法：
details-panel {
min-height: 60px;
max-height: 400px;
overflow-y: auto;
}
这样既保证默认展开时有基本高度，又防止拉得太长盖住按钮或 footer。注意：max-height + overflow-y: auto 才真正启用滚动；只写 max-height 不配 overflow，超出部分仍会被裁或溢出。
响应式中 min-height 的坑：别信 @media (min-height)
想根据屏幕高度切样式？比如 @media (min-height: 700px) { .content { min-height: 500px; } } —— 别试。这个媒体查询在绝大多数移动端完全不可靠。
原因很实际：
- iOS Safari 地址栏滑出/收起时，
window.innerHeight变了，但@media (min-height)根本不触发重计算 - Android Chrome 底部导航栏遮挡视口，
vh值不准，min-height查询更没法对齐真实可用空间 - 微信 WebView、某些 PWA 容器直接忽略该查询
替代方案更务实：
- 优先用
min-height: clamp(300px, 100dvh, 800px)——dvh动态响应地址栏变化，clamp()设上下限 - 需要精确控制时，用 JS 监听
resize和orientationchange，加防抖后动态设style.minHeight
真正难的不是写对一行 min-height，而是判断它该加在哪一层、是否被父级 flex 或 grid 截断、以及在地址栏进出的毫秒级变化中是否还能稳住底线高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
