标签：
由于项目里面有底部版权需要放置，目前使用的一种方法用久了感觉不太好，于是在网上搜集了相关的文章，在知乎中看到了有人提到这个问题(点击前往)，通过对问题的回答中提供的一些方法进行查找和测试，然后作了以下的总结。
方法1 通过伪元素撑起footer所需的高度，然后设置margin-bottom一个footer高度的负值
html结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StickyFooter</title> </head> <body> <div class="page-wrap"> <p>网页内容区域</p> </div> <footer class="page-footer">版权信息</footer> </body> </html>
css样式(请自行样式重置)
html,body{height:100%;} .page-wrap{position:relative;min-height: 100%;margin-bottom:-20px;} .page-wrap:after{ content: ""; display: block; height: 20px; } .page-footer{position: relative;height: 20px;text-align: center;}
通过查看英文原文的评论，发现有人说：“如果body中的背景图片需要贴底部时，背景图片只会贴视窗的底部，当内容区域高度查过了屏幕的显示高度时，向下滑动就会发现并没有贴底内容”。亲自试了一试，的确是这样的，看看代码发现body一开始的高度设置的就是屏幕显示的高度，设置body背景图片贴底部的话就只会贴到屏幕显示区域的底部，不会贴到网页内容区域的底部，如果是那样的话，直接将背景图片放到page-wrap里不就行了。
方法2 这个方法跟方法1差不多，因为有人提出了兼容性的问题，首先是html5标签不支持，这个好说，然后就就是有些低版本的浏览器不支持伪元素选择器，于是就有了这个方法
html结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StickyFooter</title> </head> <body> <div class="page-wrap"> <p>网页内容区域</p> <div class=""push></div> </div> <div class="page-footer">版权信息</div> </body> </html>
css样式(请自行重置)
html,body{height:100%;} .page-wrap{position:relative;min-height: 100%;margin-bottom:-20px;} .push{height:20px;} .page-footer{position: relative;height: 20px;text-align: center;}
这个同样有方法1中提到的问题
方法3 这个就使用了css3中的新布局属性，只有部分兼容
html结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StickyFooter</title> </head> <body> <div class="page-wrap"> <p>网页内容区域</p> </div> <footer class="page-footer">版权信息</footer> </body> </html>
css样式(请自行重置和添加前缀)
body{display:flex;min-height:100vh;flex-direction: column;} .page-wrap{flex:1;} .page-footer{position: relative;height: 20px;text-align: center;}
这个就没有方法1中提到的问题。
方法4 这主要使用display:table和display:table-row两个属性达到效果，看到display:table不就是变成了表格的布局吗，这个没有实际试过，下面有链接提供。
以上是通过网络搜集后根据我个人项目需求进行了测试。由于项目需求千奇百怪，并不能保证适用所有的情况，若有问题可自行调整或查看下面的原文链接，查看原文解释和评论找到灵感。
参考链接：
问题链接：http://www.zhihu.com/question/35290742#answer-20340542
方法1链接：https://css-tricks.com/snippets/css/sticky-footer/
方法2链接：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
方法3链接：http://www.zhihu.com/question/35290742#answer-20340542 回答中
方法4链接：https://pixelsvsbytes.com/2011/09/sticky-css-footers-the-flexible-way/
标签：
原文地址：http://www.cnblogs.com/thyshare/p/css_2015_12_19.html
