使用overflow属性给div添加滚动条

CSS中的overflow属性规定当内容溢出元素框时发生的事情,所有主流浏览器都支持overflow属性。

overflow可能的值有:

visible:默认值。内容不会被修剪,会呈现在元素框之外。

hidden:内容会被修剪,并且其余内容是不可见的。

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承overflow属性的值。

下面是设置为auto的示例:

设置为auto的效果

图1:设置为auto的效果

实现上图1效果的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div加滚动条</title>
<style type="text/css">
	#div1 {
		width : 400px;
		height : 200px;
		overflow: auto;
	}
	
	#div2 {
		width : 500px;
		height: 100px;
		background-color: gray;
	}
</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
</div>
</body>
</html>

下面是设置为scroll的示例:

设置为scroll的效果

图2:设置为scroll的效果

实现上图2效果的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div加滚动条</title>
<style type="text/css">
	#div1 {
		width : 400px;
		height : 200px;
		overflow: scroll;
	}
	
	#div2 {
		width : 500px;
		height: 100px;
		background-color: gray;
	}
</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
</div>
</body>
</html>

可以看到scroll和auto的区别是:当设置overflow为scroll时,会一直显示滚动条;而当设置overflow为auto时,只有当元素确实超出显示区域以后才会显示滚动条。

本文标题:使用overflow属性给div添加滚动条

本文链接:http://yedward.net/?id=373

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章