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

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

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

html代码：

 
 XML/HTML Code  复制内容到剪贴板 

 
       <!-- 父层 -->          
        <  div     id  =  "wapper"  >         
            <!-- 主要内容 -->         
            <  div     id  =  "main-content"  >         
            </  div  >         
            <!-- 页脚 -->         
            <  div     id  =  "footer"  >         
            </  div  >         
        </  div  >         
 


CSS如下：
 
 CSS Code  复制内容到剪贴板 

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


这时候，其它浏览器上都能正常显示了，但是IE 6要另外处理：
 
 CSS Code  复制内容到剪贴板 

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


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

      
查看更多关于html的footer置于页面最底部的简单实现方法的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did37538