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]-->  

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值