最大高度属性
最后更新：2026-09-13
max-height 最大高度属性
max-height 属性用于设置元素的最大高度，防止元素过高撑破布局。默认值 none 表示没有最大高度限制。它常配合 overflow:auto 使用，当内容超出最大高度时显示滚动条，是实现固定高度滚动区域的常用方案。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | non-replaced |
| 可动画 | length |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
max-height: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无最大高度限制 |
<length> | 类型 | 固定最大高度 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： max-height 需要配合 overflow 使用，否则内容会溢出容器。
❓ 常见问题
Qmax-height 和 height 同时设置会怎样？
A实际高度取两者较小值。height:100px 且 max-height:80px 时元素高 80px；height:100px 且 max-height:150px 时元素高 100px。内容少于设定高度时按内容高度显示。若要限制高度并处理溢出，还需配合 overflow 属性，否则超出部分会溢出显示。
Q如何实现固定高度的滚动区域？
A给容器设 max-height 并配 overflow-y:auto，如 .list { max-height:300px; overflow-y:auto; }。内容不超过 300px 不显示滚动条，超过出现垂直滚动条，常用于聊天记录、通知列表等。用 max-height 比 height 优：内容少时不产生空白。
Q如何实现文本超出显示省略号？
A单行：white-space:nowrap + overflow:hidden + text-overflow:ellipsis。多行：-webkit-line-clamp:2 配 -webkit-box 系列属性并加 overflow:hidden，依赖 -webkit- 前缀。
Qmax-height 可以设置为 0 吗？
A可以，max-height:0 会把元素高度压为 0，常用于折叠/展开动画：初始 max-height:0 + overflow:hidden 隐藏，展开时过渡到足够大的值。这是 CSS 高度动画的经典 hack，现在更推荐用 grid-template-rows 的 0fr/1fr 过渡实现同样效果。
🏷️ 相关属性
💡 相关案例
📚 相关教程
