垂直溢出属性
最后更新：2026-09-13
overflow-y 垂直溢出属性
overflow-y 属性专门控制内容在垂直方向溢出容器时的处理方式，取值与 overflow 相同。默认值 visible 让溢出内容可见。它是最常用的溢出控制属性，常配合 max-height 实现固定高度区域的滚动查看。
| 分类 | |
|---|---|
| 初始值 | visible |
| 继承 | 否 |
| 适用于 | block-container |
| 可动画 | discrete |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
overflow-y: visible | hidden | clip | scroll | auto;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
visible | hidden | scroll | auto | 关键字 | 垂直方向溢出处理 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-y | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| 所有主流浏览器均支持 | |||||
提示： overflow-y:auto 在内容未溢出时不显示滚动条，溢出时才出现，比 scroll 更美观。
❓ 常见问题
Q如何让 div 内容超出时滚动？
A给 div 设固定高度并加 overflow-y:auto，如 .list { max-height:300px; overflow-y:auto; }。内容超过高度出现垂直滚动条，未超过不显示。用 max-height 而非 height，内容少时无空白。这是聊天窗口、通知列表等场景的标准做法。
Qoverflow-y:hidden 会怎样？
A垂直方向溢出的内容会被裁剪隐藏，用户无法通过滚动查看被裁掉的部分。适合确认内容一定不会超出的固定展示区域（如定高 banner），或结合 JS 控制滚动。注意：它是不可滚动的，若只是不想显示滚动条但仍可滚（如自定义滚动条），overflow-y:hidden 不满足需求，需要换成 visible + 滚动容器技巧。
Qoverflow-y:auto 和 overflow-y:scroll 有什么区别？
Ascroll 会始终显示垂直滚动条（哪怕内容没溢出），占用的滚动条槽位会一直存在；auto 只在内容溢出时才显示滚动条，未溢出时隐藏。外观上 auto 更干净、无多余槽位，所以日常布局推荐 auto。scroll 适合明确告知用户该区域可滚动的场景（如教程说明）。
Qoverflow-x 和 overflow-y 可以同时设置吗？
A可以，但有个规则：两方向都是 visible 时内容正常溢出；只要一个方向不是 visible，另一个方向的 visible 会被自动改写为 auto。例如 overflow-x:hidden; overflow-y:visible 实际变成 overflow-y:auto。
🏷️ 相关属性
💡 相关案例
📚 相关教程
