min-height未生效主因是父容器约束或height冲突；需确保父容器形成bfc、避免height覆盖、注意flex/grid布局特性及移动端vh兼容性问题。
min-height 设置后元素没生效？检查是否被父容器约束
常见现象是写了 min-height: 200px，但元素还是塌缩成一行高。根本原因往往是父容器没有形成有效的块格式化上下文（BFC），或者设置了 height 固定值、overflow: hidden 等压制行为。
- 父元素若为
display: flex或display: grid，子元素的min-height默认受容器主轴尺寸控制，需额外加align-self: stretch或设置容器align-items - 父元素若设了
height: 100%但祖先链中某个父级没给高度（比如html、body缺失height: 100%），则百分比min-height会计算为 0 - 绝对定位元素（
position: absolute）的min-height有效，但若同时设了top/bottom，浏览器可能优先按定位拉伸，忽略min-height
min-height 和 height 混用时的优先级陷阱
min-height 不会覆盖 height 的显式声明——它只在内容撑不开时兜底。一旦你同时写了 height: 100px 和 min-height: 200px，实际表现是「固定 100px」，因为 height 优先级更高，min-height 彻底失效。
- 想让元素至少 200px 高、又能随内容变高？只用
min-height: 200px，别写height - 需要“上限+下限”？用
min-height: 200px; max-height: 400px;，此时height: auto是默认且安全的 - Flex 容器里的子项若设了
height，可能破坏弹性行为；改用min-height+flex: 1更可控
移动端适配时 min-height 的兼容性注意点
iOS Safari 在某些老版本（如 iOS 12.5）中，对 min-height 与 vh 单位组合支持不稳定，尤其在地址栏收放时触发 viewport 高度重算，导致 min-height: 100vh 突然变矮甚至为 0。
- 避免直接用
min-height: 100vh做全屏占位；可改用min-height: 100dvh（现代 Safari/Chrome 支持更好） - 若需兼容旧版 iOS，用 JS 动态写入
style.minHeight = window.innerHeight + 'px'并监听resize事件 - 使用
min-height配合padding-bottom实现“底部留白”时，注意软键盘弹出会导致 viewport height 缩小，CSS 无法自动响应
用 min-height 防止内容溢出的典型场景
这不是万能方案——min-height 只管高度下限，不管内容是否被截断。真正防溢出要配合 overflow 或布局机制。
- 卡片内容区希望至少显示 3 行文字，又不希望文字被裁掉：用
min-height: calc(1.5em * 3)+overflow: hidden+text-overflow: ellipsis（注意后者需white-space: nowrap） - 模态框主体区域需滚动而非撑高：设
min-height: 200px+max-height: 60vh+overflow-y: auto - 表格行高不一致时，用
min-height替代height能避免文字换行被压扁，但需确认box-sizing: border-box已启用，否则 padding 会额外增加高度
实际项目里最容易被忽略的是：当 min-height 作用在浮动元素、inline 元素或 table-cell 上时，行为完全不同——这些场景下它基本无效，必须先确保元素是块级或弹性/网格子项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
