Home > Web Front-end > HTML Tutorial > html的footer置于页面最底部的简单实现方法_HTML/Xhtml_网页制作

html的footer置于页面最底部的简单实现方法_HTML/Xhtml_网页制作

WBOY
Release: 2016-05-24 09:05:24
Original
1869 people have browsed it

需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望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.     positionrelative;   /*重要!保证footer是相对于wapper位置绝对*/     
  3.     heightauto;          /* 保证页面能撑开浏览器高度时显示正常*/     
  4.     min-height: 100%  /* IE6不支持,IE6要单独配置*/     
  5. }     
  6. #footer{     
  7.    positionabsolute;  bottombottom: 0; /* 关键 */     
  8.    left:0; /* IE下一定要记得 */     
  9.    height60px;         /* footer的高度一定要是固定值*/     
  10. }     
  11. #main-content{     
  12.    padding-bottom60px/*重要!给footer预留的空间*/     
  13. }     

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

CSS Code复制内容到剪贴板
  1.      

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template