最小高度属性
最后更新：2026-09-13
min-height 最小高度属性
min-height 属性用于设置元素的最小高度，确保元素在内容较少时仍保持一定高度。默认值 0 表示没有最小高度限制。它常用于保证页面区块的视觉一致性，或让页脚始终保持在页面底部。
| 分类 | |
|---|---|
| 初始值 | 0 |
| 继承 | 否 |
| 适用于 | non-replaced |
| 可动画 | length |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
min-height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
0 | 关键字 | 无最小高度限制 |
<length> | 类型 | 固定最小高度 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： min-height 优先级高于 height 和 max-height，内容超出时会自动撑高。
❓ 常见问题
Qmin-height 和 height 有什么区别？
Aheight 是固定高度，内容超过设定值会溢出容器（溢出部分默认可见）；min-height 只设置高度下限，内容少时元素保持设定高度，内容多时自动增高撑开，永远不会溢出。因此在内容长度不确定的组件（卡片、弹窗、页面主体）中，推荐用 min-height 而非 height，布局更安全灵活。
Q如何让页面主体最小占满一屏？
A给主体容器设置 min-height:100vh，内容少时主体至少占满视口高度，内容多时自动向下延伸，不会出现页脚悬在半空的尴尬。100vh 表示 100% 视口高度。相比 height:100vh，min-height 更优——它允许内容超出一屏后正常滚动，而不是被固定高度卡住。
Qmin-height:100vh 和 height:100vh 哪个更好？
Aheight:100vh 固定高度等于视口，内容超过就溢出或需内部滚动，适合单屏应用（如 H5 活动页）；min-height:100vh 保证至少一屏高、内容多了自动增长，适合普通网页骨架。绝大多数网站布局推荐 min-height:100vh，配合 flex 还能实现粘性页脚（sticky footer）。
Q为什么 min-height 的百分比不生效？
A与 height 一样，min-height 的百分比是相对父元素内容区高度计算的，父元素高度为 auto 时百分比会失效。想要子元素占满父容器高度，父元素必须先有确定高度，或者改用 flex 布局让子项自动拉伸（align-items 默认 stretch），这是更推荐的做法。
🏷️ 相关属性
💡 相关案例
📚 相关教程
