标签：
刚写的时候有三种思路：
最终使用方法亮点，margin-bottom负值（如果你觉得这个提示够了，就自己开始写会更有意思）
首次构想代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>测试</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 html, body{height:100%;} 9 #main{min-height: 100%;margin-bottom:-60px;} 10 #footer{height:60px;background: yellow;} 11 li{line-height: 100px;} 12 </style> 13 </head> 14 <body> 15 <div id="main"> 16 主内容 17 </div> 18 <div id="footer"> 19 这个是底部 20 </div> 21 </body> 22 </html>
乍一看似乎没有什么异常，但是我们往主内容区域放更多内容呢？
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>测试</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 html, body{height:100%;} 9 #main{min-height: 100%;margin-bottom:-60px;} 10 #footer{height:60px;background: yellow;} 11 li{line-height: 100px;} 12 </style> 13 </head> 14 <body> 15 <div id="main"> 16 <ul> 17 <li>发送到发送到发</li> 18 <li>发送到发送到发</li> 19 <li>发送到发送到发</li> 20 <li>发送到发送到发</li> 21 <li>发送到发送到发</li> 22 <li>发送到发送到发</li> 23 <li>发送到发送到发</li> 24 <li>发送到发送到发</li> 25 <li>发送到发送到发</li> 26 <li>发送到发送到发</li> 27 <li>发送到发送到发</li> 28 <li>发送到发送到发</li> 29 <li>发送到发送到发法师打发杀到发送到发发送到发送到发</li> 30 </ul> 31 </div> 32 <div id="footer"> 33 这个是底部 34 </div> 35 </body> 36 </html>
主内容区和底部重合
哦，那好办，将底部的层级弄的高一点，所以就有了如下代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>测试</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 html, body{height:100%;} 9 #main{min-height: 100%;margin-bottom:-60px;} 10 #footer{height:60px;background: yellow;position: relative;z-index: 1;} 11 li{line-height: 100px;} 12 </style> 13 </head> 14 <body> 15 <div id="main"> 16 <ul> 17 <li>发送到发送到发</li> 18 <li>发送到发送到发</li> 19 <li>发送到发送到发</li> 20 <li>发送到发送到发</li> 21 <li>发送到发送到发</li> 22 <li>发送到发送到发</li> 23 <li>发送到发送到发</li> 24 <li>发送到发送到发</li> 25 <li>发送到发送到发</li> 26 <li>发送到发送到发</li> 27 <li>发送到发送到发</li> 28 <li>发送到发送到发</li> 29 <li>发送到发送到发法师打发杀到发送到发发送到发送到发</li> 30 </ul> 31 </div> 32 <div id="footer"> 33 这个是底部 34 </div> 35 </body> 36 </html>
完美了吗？
哦~~~no~~细心的人会发现，主内容区最后一个li的内容明明很长的，好像没有显示。
对了，是的，但是不是没有显示，刚刚没有给底部添加层级的时候还和底部重合了呢，只是底部层级增加以后被底部给遮盖了呢。
OK，这个时候有多重方法来解决这个问题：
以下分别是上边两条对应的代码，各有好坏，根据个人喜好采用；本人采用的是第2条，尽管会有空标签，但是主内容层级太深实在不喜欢；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>测试</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 html, body{height:100%;} 9 #main{min-height: 100%;margin-bottom:-60px;} 10 #footer{height:60px;background: yellow;position: relative;z-index: 1;} 11 li{line-height: 100px;} 12 #content{padding-bottom:60px;} 13 </style> 14 </head> 15 <body> 16 <div id="main"> 17 <div id="content"> 18 <ul> 19 <li>发送到发送到发</li> 20 <li>发送到发送到发</li> 21 <li>发送到发送到发</li> 22 <li>发送到发送到发</li> 23 <li>发送到发送到发</li> 24 <li>发送到发送到发</li> 25 <li>发送到发送到发</li> 26 <li>发送到发送到发</li> 27 <li>发送到发送到发</li> 28 <li>发送到发送到发</li> 29 <li>发送到发送到发</li> 30 <li>发送到发送到发</li> 31 <li>发送到发送到发法师打发杀到发送到发发送到发送到发</li> 32 </ul> 33 </div> 34 </div> 35 <div id="footer"> 36 这个是底部 37 </div> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>测试</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 html, body{height:100%;} 9 #main{min-height: 100%;margin-bottom:-60px;} 10 #footer{height:60px;background: yellow;position: relative;z-index: 1;} 11 li{line-height: 100px;} 12 .false-footer{height:60px;} 13 </style> 14 </head> 15 <body> 16 <div id="main"> 17 <ul> 18 <li>发送到发送到发</li> 19 <li>发送到发送到发</li> 20 <li>发送到发送到发</li> 21 <li>发送到发送到发</li> 22 <li>发送到发送到发</li> 23 <li>发送到发送到发</li> 24 <li>发送到发送到发</li> 25 <li>发送到发送到发</li> 26 <li>发送到发送到发</li> 27 <li>发送到发送到发</li> 28 <li>发送到发送到发</li> 29 <li>发送到发送到发</li> 30 <li>发送到发送到发法师打发杀到发送到发发送到发送到发</li> 31 </ul> 32 <div class="false-footer"></div> 33 </div> 34 <div id="footer"> 35 这个是底部 36 </div> 37 </body> 38 </html>
标签：
原文地址：http://www.cnblogs.com/bjchenxn/p/5153622.html
