min-height 是设置元素最小高度的标准属性，值为长度或百分比，不允许负值；现代浏览器全支持，ie6不支持；内容少时保持设定高度，多时自动撑开，语义清晰无副作用。
直接用 min-height 就够了，现代浏览器全支持
现在（2026年）绝大多数项目已不再需要兼容 IE6/IE7，min-height 是最干净、最可靠的方式。它明确表达“内容少时保持这个高度，内容多时自动撑开”，语义清晰，无副作用。
常见错误是误用 height：比如写 height: 200px 会导致内容溢出被裁剪，或强行固定高度失去自适应能力。
-
min-height: 300px—— 推荐首选，简洁、可维护、无 hack - 不要混用
height: auto !important+height: 300px—— 这套 IE6 兼容方案在当前项目里反而可能引发意外交互（比如 Flex 容器中 height 冲突） - 如果父容器用了
display: flex，子div的min-height依然生效，但需注意flex-shrink: 0等行为是否干扰了预期伸缩
需要同时限制最大高度？加 max-height 和 overflow
当内容可能极长（比如日志块、评论区），只设最小高度不够，得防页面失控。这时组合使用三属性更稳妥：
-
min-height: 200px—— 至少显示两屏关键信息 -
max-height: 600px—— 防止拉得太长 -
overflow-y: auto—— 超出时出现滚动条，不破坏布局
示例：
.log-panel { min-height: 200px; max-height: 600px; overflow-y: auto; }
为什么有些老代码写 height: auto !important; height: 200px; min-height: 200px？
那是为兼容 2010 年代的 IE6–IE8 设计的 hack。IE6 不识别 min-height，又把 height: auto 当无效值，所以靠后写的 height: 200px 兜底；而 IE7+/Firefox 优先读 height: auto !important，再结合 min-height 实现自适应。
这套写法今天仍有残留，但问题不少：
- 在 CSS-in-JS 或 Shadow DOM 环境下，
!important可能被隔离或覆盖失效 - 和
aspect-ratio、contain: layout等新特性存在隐式冲突 - 开发者容易误删中间某条，导致 IE6 兼容逻辑突然“复活”并影响现代浏览器渲染
真要兼容超老环境？优先降级，而不是硬塞 hack
如果你确实要支持仍在运行 IE8 的内网系统（极少数政企场景），更可控的做法是：
- 用条件注释或 UA 检测加载独立的 legacy.css，里面放老式 hack
- 主样式表坚持用标准
min-height，避免污染现代逻辑 - 测试时重点看
min-height在 flex/grid 容器中的表现——某些旧版 Safari（≤14）对min-height在 grid item 中的支持有偏差，此时可补min-block-size
真正难处理的不是最小高度本身，而是它嵌套在复杂布局层级里时，和 fit-content、clamp()、或者父级 transform 触发的层叠上下文之间产生的不可见干涉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
