005-CSS让页脚始终在底部不论页面内容多少

让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。

方案一：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <style type="text/css">
 6         body, html {
 7             margin: 0;
 8             padding: 0;
 9             height: 100%;
10         }
11 
12         #main {
13             position: relative;
14             min-height: 100%;
15             background: #eee;
16         }
17 
18         #content {
19             padding: 10px;
20             padding-bottom: 100px;
21         }
22 
23         #footer {
24             position: absolute;
25             bottom: 0;
26             height: 100px;
27             width: 100%;
28             background: lightblue;
29         }
30     </style>
31 </head>
32 <body>
33     <div id="main">
34         <div id="content">
35             <script type="text/javascript">
36                 for (var i = 0; i < 400; i++) {
37                     document.write(i + '<br/>');
38                 }
39             </script>
40         </div>
41         <div id="footer">
42             Footer
43         </div>
44     </div>
45 </body>
46 </html>

方案二：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>css实现页脚始终在最底部</title>
 6     <style type="text/css">
 7         * {
 8             padding: 0;
 9             margin: 0;
10         }
11 
12         html {
13             *overflow: auto;
14         }
15 
16         body {
17             _width: expression(this.parentNode.clientWidth);
18         }
19 
20         html, body {
21             height: 100%;
22         }
23 
24         .section {
25             min-height: 100%;
26             _height: 100%;
27         }
28 
29         .footer {
30             height: 60px;
31             background: #000;
32             margin-top: -60px;
33             color: #FFF;
34         }
35     </style>
36 </head>
37 <body>
38     <div class="section">
39         <script type="text/javascript">
40             for (var i = 0; i < 400; i++) {
41                 document.write(i + '<br/>');
42             }
43         </script>
44     </div>
45     <div class="footer">我是页脚</div>
46 </body>
47 </html>

让页脚始终固定在屏幕底部：

 1 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta name="generator" content="editplus">
 6     <meta name="author" content="Ariex">
 7     <meta name="keywords" content="">
 8     <meta name="description" content="">
 9     <style type="text/css">
10         body {
11             margin: 0px;
12             padding: 0px;
13             overflow: hidden;
14             padding-top: 22px;
15             padding-bottom: 22px;
16         }
17 
18         #header {
19             background-color: blue;
20             color: white;
21             position: absolute;
22             top: 0px;
23             left: 0px;
24             height: 16px;
25             width: 100%;
26         }
27 
28         #content {
29             background-color: yellow;
30             width: 100%;
31             height: 100%;
32             overflow: auto;
33         }
34 
35         #footer {
36             background-color: green;
37             color: white;
38             width: 100%;
39             height: 16px;
40             position: absolute;
41             bottom: 0px;
42             left: 0px;
43         }
44     </style>
45     <script language="javascript">
46     </script>
47 </head>
48 <body>
49     <div id="header">header</div>
50     <div id="content">
51         <script language="javascript">
52             for (i = 0; i < 1000; i++) {
53                 document.write(i + "");
54             }
55         </script>
56     </div>
57     <div id="footer">footer</div>
58 </body>
59 </html>