手機端sticker布局，底部按鈕在螢幕底部

標籤：css   relative   class   pad   box   wrapper   flow   scope   clear   

<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>

 

手機端sticker布局，底部按鈕在螢幕底部