网站页脚始终保持底部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站页脚始终保持底部相关的知识，希望对你有一定的参考价值。
刚写的时候有三种思路：
- 页脚代码直接放到最下边；但是内容少的时候页脚显示在内容的底部，而不是浏览器的底部；
- 相对于视窗定位；但是内容多的时候页脚一直在视窗底部，于产品需求不符；
- 内容区最小高度为100%，页脚代码在最底部；但是内容少的时候右侧会出现本不应该出现的滚动条，滚动高度为底部高度；
最终使用方法亮点，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，这个时候有多重方法来解决这个问题：
- 在主内容区外面再套一层，添加padding-bottom / margin-bottom为页脚高
- 在主内容区id为main的div下边放置一个高度和页脚高度相同的空标签
以下分别是上边两条对应的代码，各有好坏，根据个人喜好采用；本人采用的是第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>
以上是关于网站页脚始终保持底部的主要内容，如果未能解决你的问题，请参考以下文章
如何使页脚视图始终位于 UITableViewController 的底部？