zoukankan      html  css  js  c++  java
  • css sticky footer布局

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。
    套路为:内容层和页脚层

    1.内容层需要有一个外层wrapper 并且清除浮动,需要设置min-height: 100%  使之撑满整个屏幕 --->detail-wrapper 

    2.外层wrapper里面的内容detail-main,需要设置paddding-bottom把页脚层的位置留出来,让页脚不会覆盖内容

    3.页脚的内容detail-close需要设置margin: -64px auto 0 auto 来防止detail-wrappe内容充满整个屏幕,并且设置clear:both清除浮动

          <div class="detail-wrapper clearfix">
            <div class="detail-main"></div>
          </div>
          <div class="detail-close" @click="closeDetail">
            <i class="icon-close"></i>
          </div>
  • 相关阅读:
    Python form...import...和import的区别(自己理解的)
    ! cocos2d 同一个sprite的触控问题
    cocosjs 触摸
    打包apk
    单例模式
    策略模式
    工厂模式
    cocos3 singleton
    tiledmap2
    quick cocos 暂停场景
  • 原文地址:https://www.cnblogs.com/qwert1/p/8795027.html
Copyright © 2011-2022 走看看