CSS 固定div不随屏幕滚动
固定某一元素不滚动感觉还是挺有用的，一侧边栏不动而滚另一侧，固定导航条，而固定footer则比较少见，关于footer，还要做一些特殊处理，之后会有说明。
当然，感觉代码还不好，需要改进=A=
左右比较简单，我们利用float和position的联合就能实现，下面代码中所实现的是左边栏固定。
首先我们来看一下css的部分。
1 html,body {
2 margin: 0;
3 padding: 0;
4 height: 100%;
5 }
6 .container {
7 margin: 0 auto;
8 width: 100%;
9 height: 100%;
10 }
11
12 .left {
13 position: fixed;
14 width: 20%;
15 border:1px solid;
16 height:100%;
17 float:left;
18 }
19
20 .right {
21 width: 78%;
22 border:1px solid;
23 float: right;
24 height:888px;
25 }
26
这里因为border也会占用一定的空间，所以width设定的比较宽松。
关于html,body的处理，可以见：CSS div高度自适应屏幕，以备不时之需。
关于fixed属性，W3School有所提及，这里我们给一个新地址的链接，感觉很不错：http://css.doyoe.com/properties/positioning/position.htm
右侧height仅是做测试之用。
然后我们引入html部分测试，css自行引入。
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>Left-Right</title>
6
7</head>
8<body>
9 <div class="container">
10 <div class="left">
11 </div>
12 <div class="right">
13 </div>
14 </div>
15</body>
16</html>
17
顶部和底部我们当然可以用相同的方法，但有一个很蛋疼的地方在于fixed有个类似于float的性质，目前我不知道如何改变，只能通过padding把header和footer占用的位置空出，以防止元素被这两货挡住，当然header还有别的方法固定（如果是导航条的话）可见演示
还有一种不错的方法，没有试验过：http://www.phpddt.com/dhtml/875.html
关于我的方法可见：CSS 对底部应该做的处理
搜到的，只贴出源码吧OTZ。
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>CSS定义一个固定在页面顶部的层</title>
6<style type="text/css">
7 body {
8 height:1200px;
9 margin: 0;
10 padding: 0;
11 background-attachment: fixed; /* prevent screen flash in IE6 */
12 }
13 div,ul{margin: 0;padding: 0;}
14 #topNavWrapper {
15 width: 980px;
16 text-align: left;
17 height: 31px;
18 margin: 0px auto;
19 z-index:100;
20 _position: relative ;
21 _top:0px;
22 }
23 #topNav {
24 width: 980px;
25 float: left;
26 display: block;
27 z-index: 100;
28 overflow: visible;
29 position: fixed;
30 top: 0px; /* position fixed for IE6 */
31 _position: absolute;
32 _top: expression(documentElement.scrollTop + "px");
33 background-image: url( /uploadfile/2012/0717/0717014456145_4456.gif);
34 background-repeat: no-repeat;
35 background-position: right;
36 height: 31px;
37 line-height: 31px;
38 color:#fff;
39 background-color:#444;
40 text-align:center;
41 }
42</style>
43</head>
44<body>
45<div id="topNavWrapper">
46<ul class="jd_menu" id="topNav">
47我是固定在页面顶部的层
48</ul>
49</div>
50</body>
51</html>
52
评论 (0)