zoukankan      html  css  js  c++  java
  • 固定导航(Sticky nav)

    方法1:

    <div class="footer">
    </div>

    .footer{
      position:fixed;
      bottom:0;
      left:0;
      100%;
      _position:absolute;
      _top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
      overflow:visible;
    }

    方法2:

    CSS Sticky Footer,出自:http://www.cssstickyfooter.com/using-sticky-footer-code.html

    <div id="wrap">
      <div id="main">
      </div>
    </div>
    <div id="footer">
    </div>

    * {margin:0;padding:0;}
    html, body {height: 100%;}
    #wrap {min-height: 100%;}
    #main {overflow:auto;padding-bottom: 180px;}
    #footer {position: relative;margin-top: -180px;height: 180px;clear:both;}
    /*Opera Fix*/
    body:before {
      content:"";
      height:100%;
      float:left;
      0;
      margin-top:-32767px;
    }
    <!--[if !IE 7]>
    <style type="text/css">
      #wrap {display:table;height:100%}
    </style>
    <![endif]-->

    此两种方法亦可用于顶部的导航。

  • 相关阅读:
    git 命令
    Spring Boot Web应用开发 CORS 跨域请求支持
    layui demo
    jQuery jqGrid 4.7
    jQurey zTree Demo 3.5
    jQurey zTree API 3.5
    jQurey Select2 4.0
    jQurey Validation 1.16
    Laytpl 1.2
    My97DatePicker 4.8
  • 原文地址:https://www.cnblogs.com/mengff/p/5183109.html
Copyright © 2011-2022 走看看