html的footer置于页面最底部的简单实现方法

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

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

htML代码：

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

CSS如下：

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

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

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

以上这篇html的footer置于页面最底部的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！