| 标题 | 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要另外处理： CSS Code 1.<!--[if IE 6]-> 2.<style> 3.#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/ 4.</style> 5.<![endif]--> 以上这篇html的footer置于页面最底部的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。