加载中…
个人资料
cicy
cicy
  • 博客等级:
  • 博客积分:0
  • 博客访问:4,288
  • 关注人气:2
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

Make the Footer Stick to the Bottom of a Page

(2014-01-02 13:44:57)
标签:

footer

footer置底

css

分类: 技术
现在网站比较流行 导航(Header)一直固定在顶部,footer一直固定在底部,前者使用position:fixed很容易实现,而将footer一直固定在底部可能会比较棘手,尤其是要兼容各种浏览器。最近发现了个比较好的方法,简单几行CSS就可实现这个功能。

HTML结构
  1.     
  2.         
  3.     
  4.     
  5.         
  6.             

    Your website content here.

  7.         <<span class="red" style="margin: 0px; padding: 0px; list-style: none; color: rgb(204, 0, 0);">/div>
  8.         
  9.             

    Copyright (c) 2008

  10.         <<span class="red" style="margin: 0px; padding: 0px; list-style: none; color: rgb(204, 0, 0);">/div>
  11.     
CSS
  1. * {
  2. margin: 0;
  3. }
  4. html, body {
  5. height: 100%;
  6. }
  7. .wrapper {
  8. min-height: 100%;
  9. height: auto !important;
  10. height: 100%;
  11. margin: 0 auto -4em;
  12. }
  13. .footer{
  14. height: 4em;
  15. }
几点注意:
1. 如果想要fixed的header,header要加在wrapper之内,且不能在wrapper上加padding-top/margin-top,以免产生多余的滚动条
2. wrapper{height:auto !important;height:100%;}主要是为了兼容低版本IE

今后再也不用担心 footer置底啦Make <wbr>the <wbr>Footer <wbr>Stick <wbr>to <wbr>the <wbr>Bottom <wbr>of <wbr>a <wbr>Page

参考原文:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有