HTML的footer置于页面最底部的方法

需求：有时候，当页面内容较短，撑不开浏览器高度，但是又希望footer能在窗口最低端。

 

思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留footer的高度。

 

把页面中的footer部分定位到底部，不会因为内容不够而上移，在网上找到一个比较简单效果又好的方法，我测试所用的的IE7、Firefox、Chrome都兼容。

原理：为了让浏览器识别高度为100%，设置html、body的height: 100%，同时把所有元素的margin和padding设置为0，这样就等于整个浏览器窗口的总高度了，把footer置于最下方，这是footer就超出这“100%”的范围了，为让footer 能够刚好在最下方，给footer加一个等于自身高度的上方的负边距（负的margin）强制把它向上推一个自身的高度，即 margin-top: 负的数值; 。但当内容超过一屏会发现内容会覆盖在footer的上方。所以还要给内容部分设置下方内补丁等于footer的高度，强制把内容部分向上推一个footer的高度就OK了。

Html代码  

1. <!-- 父层 -->  
2. <div id="wapper">  
3.     <!-- 主要内容 -->  
4.     <div id="main-content">  
5.     </div>  
6.     <!-- 页脚 -->  
7.     <div id="footer">  
8.     </div>  
9. </div>  

 

CSS如下：

Xml代码  

1. #wapper{  
2.     position: relative;   /*重要！保证footer是相对于wapper位置绝对*/  
3.     height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/  
4.     min-height: 100%  /* IE6不支持，IE6要单独配置*/  
5. }  
6. #footer{  
7.    position: absolute;  bottom: 0; /* 关键 */  
8.    left:0; /* IE下一定要记得 */  
9.    height: 60px;         /* footer的高度一定要是固定值*/  
10. }  
11. #main-content{  
12.    padding-bottom: 60px; /*重要！给footer预留的空间*/  
13. }  

 

这时候，其它浏览器上都能正常显示了，但是IE 6要另外处理：

Html代码  

1. <!--[if IE 6]->  
2. <style>  
3. #wapper{height:100%;} /* IE在高度不够时会自动撑开层*/  
4. </style>  
5. <![endif]-->