DIV模仿完全自适应的网页框架实例_层和布局特效

DIV完全自适应的实例，利用overflow:hidden你可以去掉默认存在的滚动条，一个仿框架的div布局就非常容易了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>div仿框架布局</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#f60; line-height:1.6;} /* www.mb5u.com */
.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
html { _padding:70px 10px;} /* www.mb5u.com */
.top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
.side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
.main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
.bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
</style>
</head>
<body>
<div class="top"></div>
<div class="side">
			 
			 
			 
			 
			 
			 
			 
			 
			 
</div>
<div class="main">
			 
			 
			 
			 
			 
			 
			 
			 
			 
</div>
<div class="bottom"></div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-11-17

[收藏][报错][返回列表]

DIV模仿完全自适应的网页框架实例_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些