让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。
方案一：
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>