高度属性
最后更新：2026-09-13
height 高度属性
height 属性用于设置元素内容区的高度，与 width 同为盒模型核心尺寸属性。默认值 auto 让浏览器根据内容自动计算高度，这是最常用也最推荐的做法。百分比高度需要父元素有明确高度才能生效，否则会被计算为 0。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | non-replaced |
| 可动画 | length |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | 关键字 | 浏览器自动计算高度 |
<length> | 类型 | 固定长度值 |
<percentage> | 类型 | 相对于包含块的百分比 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
注意： 百分比高度要求父元素有显式 height，否则不生效。想让子元素占满视口可用 vh 单位。
❓ 常见问题
Qheight:100% 为什么不生效？
A因为百分比高度相对父元素内容区高度计算，而父元素默认 height:auto，auto 的 100% 仍是 auto，所以子元素高度百分比失效。解决办法：给父元素设置明确高度；用 vh 单位（height:100vh 表示视口高度）；或用 flex/grid 让子元素自动拉伸。
Q如何让元素高度随内容撑开？
A高度默认 height:auto 即可，块级元素高度由内容决定。要精确控制可配合 min-height 设下限、max-height 设上限：min-height:200px 保证内容少也有高度、内容多自动增高；max-height 限制最高高度，超出配合 overflow 处理。别为常规内容写死 height。
Qheight:auto 和 height:100vh 有什么区别？
Aheight:auto 让高度由内容决定，内容少盒子矮、内容多盒子高；height:100vh 让元素高度等于视口高度，内容少也占满一屏，内容多则溢出。想让页面主体最少占满一屏又允许内容超高，推荐用 min-height:100vh 而不是 height:100vh。
Q如何让子元素占满父元素高度？
A方案一：父元素设固定高度后，子元素用 height:100%；方案二：父元素 display:flex，子元素 align-self:stretch（flex 默认拉伸）；方案三：grid 中给子项设 height:100% 或 1fr。注意 height:100% 要求父元素自身必须有确定高度，否则不生效。
🏷️ 相关属性
💡 相关案例
📚 相关教程
