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代码  


<!-- 父层 -->  

<div id="wapper">  

    <!-- 主要内容 -->  

    <div id="main-content">  

    </div>  

    <!-- 页脚 -->  

    <div id="footer">  

    </div>  

</div>  

 

CSS如下：

Xml代码  


#wapper{  

    position: relative;   /*重要！保证footer是相对于wapper位置绝对*/  

    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/  

    min-height: 100%  /* IE6不支持，IE6要单独配置*/  

}  

#footer{  

   position: absolute;  bottom: 0; /* 关键 */  

   left:0; /* IE下一定要记得 */  

   height: 60px;         /* footer的高度一定要是固定值*/  

}  

#main-content{  

   padding-bottom: 60px; /*重要！给footer预留的空间*/  

}  

 

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

Html代码  


<!--[if IE 6]->  

<style>  

#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/  

</style>  

<![endif]-->