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

你可能感兴趣的:(html/css)