标签: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>
标签:css relative class pad box wrapper flow scope clear
原文地址:http://www.cnblogs.com/lanyueff/p/7998346.html