zoukankan      html  css  js  c++  java
  • Sticky footers 套路

    CSS Secrets】 http://shop.oreilly.com/product/0636920031123.do

      

    以饿了么商家信息的弹出层为例,布局如下:

    <!-- 饿了么 弹出层部分 -->
    <div class="detail" v-show="detailShow">    
        <!-- 和关闭按钮同级,注意要设置min-height:100% -->
        <div class="detal-wrap clearfix">
            <!-- 主内容区域 -->
            <div class="detal-content"></div>
        </div>
        <!-- 要固定在底部的关闭按钮 -->
        <div class="detal-close">
            <span class="icon-close"></span>
        </div>
    </div>

    样式上,

    .detail{
        position: fixed;
         100%;
        height: 100%;
        top:0;
        z-index: 100;
        overflow: auto; // 必不可少
    
        .detal-wrap{
            min-height: 100%;
            
                .detal-content{
                    padding-bottom: 64px; //底部固定的区域大小
                }
        }
    
        .detal-close{
            position: relative;
             32px;
            height:32px;
            margin:-64px auto 0; //大小和底部固定区域对应
            clear: both;
            font-size: 32px;
        }
    }
  • 相关阅读:
    [Heoi2013]Alo
    10.24 考试
    第八周作业
    第七周作业
    第六周作业
    第五周作业
    第四周作业
    求最大值及其下标
    查找整数
    抓老鼠啊~亏了还是赚了?
  • 原文地址:https://www.cnblogs.com/happyhaibei/p/7253953.html
Copyright © 2011-2022 走看看