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>