CSS教程之:CSS滚动条
有时候,一个元素的内容需要的现实空间超出了元素的尺寸。例如:一个指定高度与宽度的div元素,如果包含的文本太长,就会超过div元素的尺寸。 为了处理这种情况,CSS提供了一个属
有时候,一个元素的内容需要的现实空间超出了元素的尺寸。例如:一个指定高度与宽度的div元素,如果包含的文本太长,就会超过div元素的尺寸。
为了处理这种情况,CSS提供了一个属性:overflow。
这个属性可以包含下列可选值:
例子:
为了处理这种情况,CSS提供了一个属性:overflow。
这个属性可以包含下列可选值:
Visible: 允许显示超出元素边界的内容
hidden : 隐藏超出元素边界的内容
scroll : 元素尺寸不变,在元素上添加滚动条,允许用户通过拖拉滚动条显示超出边界的内容。
auto: 当内容超出元素边界时显示滚动条,否则不显示滚动条
hidden : 隐藏超出元素边界的内容
scroll : 元素尺寸不变,在元素上添加滚动条,允许用户通过拖拉滚动条显示超出边界的内容。
auto: 当内容超出元素边界时显示滚动条,否则不显示滚动条
例子:
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>
- 上一篇:CSS教程之:CSS尺寸
- 下一篇:简单代码控制页面自动刷新
精彩图集
精彩文章