min-height百分比失效的根本原因是父容器无明确高度，导致浏览器无法计算基准；需确保html/body设height:100%或用100vh/100dvh，flex中要避免align-items:stretch覆盖，并慎用table单元格。

直接用 min-height 就行，但必须避开几个常见失效点——比如父容器没高度、用了 height 冲突、或在 flex 里被拉伸覆盖。

min-height 百分比值为什么经常不生效？

百分比 min-height（如 min-height: 80%）依赖父容器的「明确高度」。如果父容器是 height: auto 或没设高度，浏览器无法计算百分比基准，结果等同于 min-height: auto。

• 修复方法：向上追溯祖先链，确保至少一个父级有显式高度，例如 html, body { height: 100%; }
• 更稳妥的做法是改用视口单位：min-height: 100vh（全屏）或 min-height: calc(100vh - 64px)（减去固定 header 高度）
• iOS Safari 滚动时 vh 会缩放，此时优先用 min-height: 100dvh（Chrome 105+、Safari 16.4+ 支持）

在 Flex 容器里 min-height 失效怎么办？

Flex 子项默认 align-items: stretch，会强行拉高子元素高度，覆盖 min-height 设置。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给子元素加 align-self: flex-start，再配 min-height 才有效
• 如果父容器本身没高度，子项即使设了 min-height 也无参考基准；可尝试 min-height: 0 触发 flex 最小尺寸计算逻辑
• 避免在 flex 子项上混用 height 和 min-height，容易互相干扰

响应式场景下怎么动态调整 min-height？

用媒体查询配合不同单位最灵活，别只靠单一值硬编码。

• 移动端优先：min-height: 400px（固定值防塌陷）
• 中屏以上：@media (min-width: 768px) { .main { min-height: calc(100vh - 80px); } }
• 大屏适配：@media (min-width: 1200px) { .main { min-height: 600px; } }
• 注意：不要对 min-height 做 transition 动画，它不支持过渡；要实现展开/收起效果，改用 max-height + overflow: hidden

最容易被忽略的是表格单元格（td、th）里的 min-height——它基本无效，得在外层包一层 div 再设；还有 modal 或 sidebar 这类局部滚动容器，设了 min-height 却没管 overflow，很容易触发双滚动条。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！