CSS overflow-y 属性
当一个块级元素（div元素、p元素之类的）的内容在垂直方向发生溢出时， CSS overflow-y 属性决定如何处理溢出的内容。 隐藏溢出内容（hidden），或者显示滚动条（scroll），或者直接显示溢出内容（visible），或者让浏览器来处理（auto）。
实例
裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：
<!DOCTYPE html><html><head><style>div{width:110px;height:110px;border:thin solid black;overflow-x:hidden;overflow-y:hidden;}</style></head><body><div><p style="width:140px">这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div><p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p><p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。带 -ms- 的数字表示使用前缀的首个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| overflow-x | 4.0 | 9.08.0 -ms- | 1.5 | 3.0 | 9.5 |
定义和用法
overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
提示：使用 overflow-x 属性来确定对左/右边缘的裁剪。
| 默认值： | visible |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.overflowY="scroll" |
语法
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 | 测试 |
|---|---|---|
| visible | 不裁剪内容，可能会显示在内容框之外。 | 测试 |
| hidden | 裁剪内容 - 不提供滚动机制。 | 测试 |
| scroll | 裁剪内容 - 提供滚动机制。 | 测试 |
| auto | 如果溢出框，则应该提供滚动机制。 | 测试 |
| no-display | 如果内容不适合内容框，则删除整个框。 | 测试 |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 | 测试 |