css如何定位网站的footer（用DIV+CSS让footer始终在底部）
平时拿CSS布局都是一些内容比较多的网站,前两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去,不是乖乖的在下面呆着,害得我研究了半天。
对于变量的内容，使得footer始终存在底部。并且整合了列表选项。使得页面排版更加工整。
一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。
--------------最后效果如下---------------------------------------
-----------以下是XHTML代码------------
1 <body>
2 <div id="content">
3 <div id="head">
4 <h1>hello</h1>
5 </div>
6 <div id="side1">
7 <h3>side1</h3>
8 <ul>
9 <li>Let me not to the marriage of true minds</li>
10 <li>Admit impediments; love is not love</li>
11 <li>Which alters when it alteration finds</li>
12 <li>Or bends with the remover to remove</li>
13 <li>Oh, no, it is an ever fixed mark</li>
14 </ul>
15 </div>
16 <div id="main">
17 <h1>main</h1>
18 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
19 <p>文字文字文字文字文字文字文字文字文字文字</p>
20 <p> </p>
21 <p> </p>
22 <p> </p>
23 <p> </p>
24 <p> </p>
25 <p> </p>
26
27
28 </div>
29 <div id="side2">
30 <h3>side2</h3>
31 <ul>
32 <li>Let me not to the marriage of true minds</li>
33 <li>Admit impediments; love is not love</li>
34 <li>Which alters when it alteration finds</li>
35 </ul>
36 </div>
37 <div id="footer">
38 <h1>Footer</h1>
39 <div>
40 </div>
41 </body>
-----------以下是CSS代码---------------------------
1 body,html {
2 margin: 0;
3 padding: 0;
4 font: 12px/1.5 arial;
5 height:100%;
6 }
7 h1,h2,h3 {
8 margin-top: 0px;
9 padding-top: 0px;
10 }
11 #content {
12 min-height:100%;
13 height:auto;
14 position: relative;
15
16 }
17 #head
18 {
19 position: absolute;
20 left: 0px;
21 top: 0px;
22 width:750px;
23 height:100px;
24 background-color:#FF0
25 }
26 div#side1 {
27 position:absolute;
28 width:150px;
29 top: 100px;
30 left:0px;
31 background-color: #FF6666;
32 }
33 #main {
34 padding-bottom: 60px;
35 position: relative;
36 left: 150px;
37 top: 100px;
38 width: 450px;
39 margin: 0px;
40 background-color: #999999;
41 }
42 div#side2 {
43 position:absolute;
44 width:150px;
45 top: 100px;
46 left: 600px;
47 background-color: #00FF66;
48 }
49 #footer {
50 position: absolute;
51 bottom: 0;
52 padding: 10px 0;
53 background-color: #AAA;
54 width: 100%;
55 }
56 #footer h1 {
57 font: 20px/2 Arial;
58 margin:0;
59 padding:0 10px;
60 }
61
62 </style>
3833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
