zoukankan      html  css  js  c++  java
  • 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器?

    一个可以用的CSS驱动的可粘在底部的Footer

    我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底部的日子已经过去了。一段简单的css class定义和几句简单的HTML组合起来可以搞定这个事情。我做了一段简单的就连初学者也可以使用的 css 的 footer 。我已经在IE5及以上版本的ie和 chrome firefox safari 甚至 opera上测试过它了。

    CSS 固定的 FOOTER 的使用方法

    “太好了!这就是我一直寻找的!我能使用它吗?”

    当然。这是没有任何条款,许可,费用以及需求的。随便使用吧。(后面是一堆废话,不翻译)

    代码示例 

    html代码

    <body>
      <div class="wrapper">
      网页主体
         <!-- push 是用来给footer占位的-->
         <div class="push">
         </div>
    </div>
    <div class="footer">
    底部内容,比如版权声明
    </div>
    </body>
    

      

    css代码

    * {
    	margin: 0;
    }
    html, body {
    	height: 100%;
    }
    .wrapper {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -155px; /* 这个 -155px 要跟 .footer 的高度一样 */
    }
    .footer, .push {
    	height: 155px; /* .push 要跟 .footer 的高度一样  */
    }
    
    /*
    
    Sticky Footer by Ryan Fait
    
    http://ryanfait.com/
    
    */
    

      

  • 相关阅读:
    [摘录]C++ GUI库大全
    ascii 表
    ubuntu 7.04 Feisty Fawn 安装手记之二:基本配置
    二叉排序树之删除结点
    二叉树与数组
    二叉树删除,重建,交换
    二叉树判断相等,复制
    链表扩展是否有环及环的第一个结点
    二分查找
    二叉排序树之按大小遍历
  • 原文地址:https://www.cnblogs.com/fxmbz/p/4293019.html
Copyright © 2011-2022 走看看