zoukankan      html  css  js  c++  java
  • 手机端sticker布局,底部按钮在屏幕底部

    <template>
      <div class="product-detail-container">
        <div class="detail">
          <div class="detail-wrapper">
            <div class="detail-main">
              高度没有满屏,则关闭按钮固定在屏幕底部,若满屏,则关闭按钮跟着页面底部
           <!--    <div>
                <p>高度没有满屏,则关闭按钮固定在屏幕底部,若满屏,则关闭按钮跟着页面底部</p>
                <p>高度没有满屏,则关闭按钮固定在屏幕底部,若满屏,则关闭按钮跟着页面底部</p>
                <p>高度没有满屏,则关闭按钮固定在屏幕底部,若满屏,则关闭按钮跟着页面底部</p>
                <p>高度没有满屏,则关闭按钮固定在屏幕底部,若满屏,则关闭按钮跟着页面底部</p>
              </div> -->
            </div>
          </div>
          <div class="detail-close">
            关闭
          </div>
        </div>
      </div>
    </template>
    <style  lang="scss"  type="text/css" scoped>
       .product-detail-container{
        //即组件最外层div
        position: relative;
        // box-sizing:border-box;
        .detail{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        .detail-wrapper{
          width: 100%;
          min-height: 100%;
          background:green;
          .detail-main{
            // margin-top: 60px; //留出头部的高度
            padding: 0 0 60px 0;//即colse的高度
          }
        }
        .detail-close{
          position: relative;
          width: 64px;
          height: 64px;
          margin: -60px auto; //注意点
          clear: both;
          font-size: 32px;
        }
        }
      }
    
    </style>
    <script>
       // 导入要用到的子组件  
        import {mapGetters} from 'vuex' 
        export default {  
        }  
    </script>
  • 相关阅读:
    开发工具
    CPU知识
    GMAP.NET
    vtordisp
    Hadoop HBase 配置 安装 Snappy 终极教程
    asp.net Vs访问正常,iis访问出现各种问题的部分处理方法
    MVC项目小结:动态菜单
    视频的采集和动态显示
    《编程之美》
    Nginx实现简单的负载均衡web访问
  • 原文地址:https://www.cnblogs.com/lanyueff/p/7998346.html
Copyright © 2011-2022 走看看