HTML的footer设置在页面底部的思路和代码是哪些

这篇文章主要介绍了“HTML的footer设置在页面底部的思路和代码是什么”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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;  bottombottom: 0; /* 关键 */    

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

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

}    

#main-content{    

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

}    

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

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!