zoukankan      html  css  js  c++  java
  • css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html

    效果:将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾。

    以下这种方案:布局虽然复杂,但兼容性最好

    html部分

    <div class="detail">
        <div class="detail-wrapper clearfix">
            <div class="detail-main"></div>
        </div>
        <div class="detail-close"></div>
    </div>

    css部分

    <style>
    .clearfix {
      display: inline-block;
    }
    .clearfix:after {
      display: block;
      content: ".";
      height: 0;
      line-height: 0;
      clear: both;
      visibility: hidden;
    }
    
    .detail .detail-wrapper {
        height: auto; 
        min-height: 100%;
    }
    .detail .detail-wrapper .detail-main {
          margin-top: 64px; /* 必须使用和footer相同的高度 */
          padding-bottom: 64px; /* 必须使用和footer相同的高度 */
    }
    .detail .detail-close {
          position: relative;
          margin: -64px auto 0 auto; /* footer高度的负值 */
          width: 32px;
          height: 32px;
        clear: both;
        font-size: 32px;
      }
    </style>
  • 相关阅读:
    【poj1655】Balancing Act
    yargs.js用法
    8、typescript
    7、typescript
    6、typescript
    5、typescript
    4、typescript
    3、typescript
    2、typescript
    1、typescript
  • 原文地址:https://www.cnblogs.com/EnSnail/p/6984475.html
Copyright © 2011-2022 走看看