首页 > 代码库 > Sticky footers 套路
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; 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; } }
Sticky footers 套路
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。