标签:tail wrap 内容 span blog 注意 footer mil add
【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; width: 100%; height: 100%; top:0; z-index: 100; overflow: auto; // 必不可少 .detal-wrap{ min-height: 100%; .detal-content{ padding-bottom: 64px; //底部固定的区域大小 } } .detal-close{ position: relative; width: 32px; height:32px; margin:-64px auto 0; //大小和底部固定区域对应 clear: both; font-size: 32px; } }
标签:tail wrap 内容 span blog 注意 footer mil add
原文地址:http://www.cnblogs.com/happyhaibei/p/7253953.html