下面是一段纯div+css实现的头部跟底部都不动中间部分按内容收缩滚动的代码:
<!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” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
<!–
body {margin:0;padding:0;}
.top{position:fixed;left:0;top:0;height:100px;width:100%; background:#000;}
.main { background-color: #00CC66;height: 1000px; margin-top:100px;margin-bottom:100px;padding-bottom:20px;width: 100%;}
.bottom{ position:fixed;left:0;bottom:0px;height:100px;width:100%;background:#000;}
/*IE6 fixed bug*/
* html{overflow:hidden;}
* html body{overflow:auto;margin:0;}
* html .bottom{position:absolute;left:0;bottom:0px;}
* html .top{position:absolute;left:0;top:0px;}
–>
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>迷失曾经div+css</title>
</head>
<body>
<div>迷失曾经头部测试</div>
<div>
迷失曾经中部测试
<div style=”margin-top:980px;color:#fff;”>底部</div>
</div>
<div>迷失曾经底部测试</div>
</body>
</html>
实现原理是:通过固定头部跟底部在相对于浏览器的某个位置,然后中间部分按内容多少,拉动滚动条显示.
本站文章欢迎转载。转载请注明：转载自迷失曾经谢谢！
原文链接地址：div+css实现头部跟底部不动中间部分滚动 Tags: div+css, 头部跟底部都不动中间部分滚动代码
