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/
    
    */
    

      

  • 相关阅读:
    JavaScript过滤除连续的数字
    Intellij IDEA 配置Subversion插件
    匹配优先存在的问题,以及解决办法
    回溯
    Linux 启动流程
    tasklist、taskkill、taskmgr
    Mysql分区表
    Linux ${} 变量内容的提取和替换功能等
    Linux shell 提取文件名和目录名
    Mysql计划任务
  • 原文地址:https://www.cnblogs.com/fxmbz/p/4293019.html
Copyright © 2011-2022 走看看