html的footer置于网页页面最底部的简易完成方式

要求:有时,当网页页面內容较短,撑不开访问器高宽比,可是又期待footer能在对话框最低端。

思路:footer的父层的最少高宽比是100%,footer设定成相对父层部位肯定(absolute)置底(bottom:0),父层内要预留footer的高宽比。

html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!-- 父层 -->     
  2. <div id="wapper">     
  3.     <!-- 关键內容 -->     
  4.     <div id="main-content">     
  5.     </div>     
  6.     <!-- 页脚 -->     
  7.     <div id="footer">     
  8.     </div>     
  9. </div>     

CSS以下:

CSS Code拷贝內容到剪贴板
  1. #wapper{     
  2.     positionrelative;   /*关键!确保footer是相对wapper部位肯定*/     
  3.     heightauto;          /* 确保网页页面能撑开访问器高宽比时显示信息一切正常*/     
  4.     min-height: 100%  /* IE6不适用,IE6要独立配备*/     
  5. }     
  6. #footer{     
  7.    positionabsolute;  bottombottom: 0; /* 重要 */     
  8.    left:0; /* IE下1定要记得 */     
  9.    height60px;         /* footer的高宽比1定如果固定不动值*/     
  10. }     
  11. #main-content{     
  12.    padding-bottom60px/*关键!给footer预留的室内空间*/     
  13. }     

这时候候,其它访问器上都能一切正常显示信息了,可是IE 6要此外解决:

CSS Code拷贝內容到剪贴板
  1. <!--[if IE 6]->     
  2. <style>     
  3. #wapper{height:100%;} /* IE在高宽比不足时会全自动撑开层*/     
  4. </style>     
  5. <![endif]-->     

以上这篇html的footer置于网页页面最底部的简易完成方式便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。