min-height 未生效通常因父容器高度受限；需检查父元素是否设固定高度、flex/grid布局约束、包含块定位及内容是否撑开盒子。
min-height 设置后没生效？先检查父容器高度约束
很多情况下 min-height 看似“不工作”，其实是父元素没给子元素留出撑高的空间。比如父容器用了 height: 200px 或 display: flex 但没设 align-items: flex-start，子元素即使写了 min-height: 300px 也会被截断或压缩。
常见错误现象：min-height 在开发工具里显示生效，但视觉上高度还是卡在很小的值；滚动条没出现，内容被隐藏。
- Flex 容器中，子元素默认受
align-items: stretch影响，会拉伸填满父容器高度——此时min-height只有在父容器高度不足时才起作用 - Grid 容器中，需确认所在轨道（track）是否允许扩张，
min-height不会突破grid-row: 1 / 2对应的固定行高 - 绝对定位元素（
position: absolute）的min-height仅在其包含块内生效，而包含块未必是最近的父级，可能是第一个非static定位祖先
min-height 和 height 混用时的行为差异
min-height 是下限，内容多就自动增高；height 是硬性尺寸，超出就溢出或隐藏。两者同时写，height 会覆盖 min-height ——除非 height 值小于 min-height，此时浏览器会以 min-height 为准。
使用场景：卡片组件需要“至少 120px 高，但文字多时能自适应”，就不能写 height: 120px，而应只用 min-height: 120px 并确保 height: auto（默认值，通常不用显式写）。
- 避免写
height: 120px; min-height: 120px——冗余且易误改其中一个值导致行为突变 - 慎用
height: 100%+min-height：百分比高度依赖父元素有明确高度，否则100%计算为 0，min-height才生效，但逻辑已混乱 - 在
table-cell或inline-block元素上，min-height行为可能与块级元素不同，建议优先用display: block或flex
移动端适配中 min-height 的兼容性陷阱
iOS Safari 旧版本（iOS 12 及更早）对 min-height 在视口单位（如 min-height: 100vh）下的处理有偏差：键盘弹出时 vh 值不变，导致元素实际高度远超屏幕，出现不可滚动空白区。
性能影响：用 min-height: 100vh 做全屏布局很常见，但若页面存在大量同类元素，每次视口变化（如横竖屏切换）都会触发重排，尤其在低端 Android 设备上可能卡顿。
- 替代方案：用
min-height: 100dvh（dvh = dynamic viewport height），现代浏览器支持更好，iOS 16.4+ 已支持 - 降级写法可加一层：
min-height: 100vh; min-height: 100dvh;，后者覆盖前者 - 避免在
body或html上直接设min-height，容易干扰全局滚动行为，推荐设在主内容容器上
调试 min-height 生效与否的三步检查法
别猜，直接看计算值。打开开发者工具，选中元素，在 Styles 面板里找 min-height 是否被划掉（表示被覆盖），再切到 Computed 面板查 “Computed height” 和 “Min-height” 实际值。
- 第一步：右键元素 → “Inspect”，在 Styles 中确认
min-height是否被!important或更高优先级规则覆盖 - 第二步：在 Computed 面板搜索
height，看 “Computed height” 是不是等于你设的min-height值——如果不是，说明内容不够高，或者父容器压住了它 - 第三步：临时加个背景色和边框：
background: #eee; border: 1px solid red;，直观验证视觉高度是否匹配预期
最常被忽略的是：元素本身没有内容、内边距或边框，又没设置 overflow: hidden 以外的其他样式，导致 min-height 虽然生效，但因为“空盒子”太轻，父容器塌陷，看起来就像没起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
