龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS教程之:CSS滚动条

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
有时候,一个元素的内容需要的现实空间超出了元素的尺寸。例如:一个指定高度与宽度的div元素,如果包含的文本太长,就会超过div元素的尺寸。 为了处理这种情况,CSS提供了一个属
有时候,一个元素的内容需要的现实空间超出了元素的尺寸。例如:一个指定高度与宽度的div元素,如果包含的文本太长,就会超过div元素的尺寸。

为了处理这种情况,CSS提供了一个属性:overflow。
这个属性可以包含下列可选值:
Visible: 允许显示超出元素边界的内容
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>
精彩图集

赞助商链接