如何将html的footer置于页面最底部
来源：爱站网时间：2021-01-14编辑：网友分享
下面小编就为大家带来一篇html的footer置于页面最底部的简单实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
你知道如何将html的footer置于页面最底部吗？在HTML中将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要另外处理：
CSS Code复制内容到剪贴板
文中内容就是小编介绍关于如何将html的footer置于页面最底部的内容，其实开发是一个漫长的过程，需要一步一步脚踏实地，希望小编的整理能够帮助到大家。
下一篇：语义化的HTML结构的好处
