这篇文章主要介绍了“HTML的footer设置在页面底部的思路和代码是什么”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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.     position: relative;   /*重要！保证footer是相对于wapper位置绝对*/     
3.     height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/     
4.     min-height: 100%  /* IE6不支持，IE6要单独配置*/     
5. }     
6. #footer{     
7.    position: absolute;  bottombottom: 0; /* 关键 */     
8.    left:0; /* IE下一定要记得 */     
9.    height: 60px;         /* footer的高度一定要是固定值*/     
10. }     
11. #main-content{     
12.    padding-bottom: 60px; /*重要！给footer预留的空间*/     
13. }     

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

这篇关于“HTML的footer设置在页面底部的思路和代码是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS中改变滚动条样式怎样做，代码是什么

  这篇文章主要介绍了css滚动条样式修改的代码,需要的朋友可以参考下

• 如何有用CSS绘制一个简易双箭头效果

  这篇文章主要介绍了CSS常用样式之绘制双箭头的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

• 怎样用CSS滤镜构建圆角，利用圆角实现波浪怎样做？

  本篇文章带大家另辟蹊径，聊聊使用CSS滤镜构建圆角的方法，并利用圆角聊聊实现波浪效果的方法，希望对大家有所帮助！

• HTML5 meta标签要素包括几种，用法是怎样的

  本篇文章主要的为大家讲述的是关于html meta标签的三要素，就是三属性的组成和使用的介绍，里面有很多比较重要的属性值，在网页中都是很有用的，现在让我们一起来看这篇文章吧

• 用CSS怎样写可拖拽控制布局大小的功能

  利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。