css overflow-y样式

时间:2023-04-13 09:12:33

overflow-y属性用于控制元素垂直方向的溢出内容如何处理,其可取值与overflow-x相同,包括:

visible:默认值,不剪切内容,内容会超出元素框。
hidden:隐藏超出元素框的内容。
scroll:显示滚动条,即使内容没有溢出元素框。
auto:自动决定是否显示滚动条,如果内容超出元素框,显示滚动条。
以下是一个简单的示例,展示如何使用overflow-y属性来控制元素垂直方向的溢出内容:

HTML代码:

<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis felis. Fusce in quam non erat rutrum blandit. Nulla fringilla odio eget sapien fermentum, a lobortis mauris semper. Nam lobortis, mauris eu pellentesque gravida, libero leo congue mauris, sit amet dictum urna justo sit amet nunc. Etiam ut lorem non magna imperdiet vestibulum.</p>
</div>
</div>

CSS代码:

.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-y: scroll;
}

.content {
width: 300px;
height: 200px;
}

在这个例子中,我们设置父元素的overflow-y属性为scroll,这意味着无论内容是否溢出元素框,都会显示垂直滚动条。我们还设置了一个较大的子元素以确保内容溢出父元素的边界。

相关词 overflow-y