CSS3 overflow-y 属性

介绍

CSS 属性 overflow-y 用于设置元素垂直方向上的溢出内容的处理方式。

语法

overflow-y: visible | hidden | scroll | auto | inherit;

取值

取值	描述
visible	默认值。内容不会被修剪，会呈现在内容框之外。
hidden	内容会被修剪，并且不会呈现在内容框之外。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow-y 属性的值。如果没有从父元素继承到值，则为 visible。

示例

<style>
    .container {
        border: solid 1px #000;
        height: 200px;
        overflow-y: scroll;
    }
</style>
<div class="container">
    <p>这是一段内容。</p>
    <p>这是另外一段内容。</p>
    <p>这是第三段内容。</p>
    <p>这是第四段内容。</p>
</div>

上述代码块中， .container 元素的高度为 200px，如果内容超过这个高度，就会出现滚动条，以便浏览器查看其余的内容。

注意事项

overflow-y 是 CSS3 新增的属性，在 IE 8 及更早的版本中不支持。
overflow-y 属性必须与 overflow-x 属性一起使用，以设置元素的水平和垂直方向上的溢出内容的处理方式。
如果不指定父元素的高度，那么 overflow 属性设置的效果将不会生效。
如果父元素的高度比其子元素的高度大，那么 overflow 属性设置的效果也将不会生效。

总结

CSS3 的 overflow-y 属性可以帮助我们设置元素在垂直方向上溢出内容的处理方式，其中包括了 visible、hidden、scroll、auto、inherit 等多种取值。需要注意的是，overflow-y 属性必须与 overflow-x 属性一起使用，且需要设置父元素的高度以及父元素的高度不能比子元素的高度还小。

CSS3 overflow-x 属性 CSS3 perspective 属性