在做项目时，想要达到页脚固定在页面底部显示，也就是当页面主体高度在浏览器高度范围内时页脚靠浏览器底部，超出浏览器高度时页脚在页面主体下方，相当于在高度上的自适应。
乍看似乎很简单，固定在底部，用fixed定位就好啦，但是页面一屏显示不下时，页脚会遮挡页面内容。看到公司很多之前的页面，大屏幕下页脚都是悬空显示的，也是醉了，可能是之前屏幕分辨率较小，页脚就处于正常的文档流中，加个上边距。
现在常用这种方法：
html文档结构如下：
<body> <wrap> <header></header> <main></main> </wrap> <footer></footer> </body>
将页头和页面主体内容放到同一个容器中，页脚单独，之后设置样式
html,body { margin:0; padding:0; height:100%; } .wrap { min-height: 100%; height: auto !important; } .main { padding-bottom: 80px; //页脚高度+页脚与容器的距离 } .footer { height: 60px; //页脚高度 margin-top: -60px; //一个页脚高度的负外边距 }
原理是这样的：
首先无论页面内容有多少，设置它占有的高度都至少是100%(min-height:100%),然后设置页面的高度根据容器内容的高度自适应，下面要考虑页脚的位置，设置一个负的外边距使页脚在高度100%范围内显示，这样带来的问题是与wrap得部门内容重合，于是设置main的padding-bottom使部分内容空出来，这个padding-bottom值的高度就是用来容纳页脚的。
这样就实现了想要的效果，当然方法不止一种
原文：http://www.cnblogs.com/yannanyan/p/5126838.html