css布局,弹层内容不是固定的,底部有关闭按钮,需要根据内容的长度,始终停留在底部。...
1. detail为最外层弹窗,要用fixed绝对定位布局
内容部分分为两部分 1是承载主体内容 2.存放关闭按钮
<div class="detail-cover" v-show="detailShow"> <div class="detail-wrap clearfix" > <div class="detail-main"> <p>我是内容部分</p> <p>我是内容部分</p> <p>我是内容部分</p> <p>我是内容部分</p> <p>我是内容部分</p> </div> </div> <div class="detail-close"> <i class="icon-close iconsfont icons-guanbi"></i> //关闭按钮 </div> </div>
.detail-cover{position: fixed; z-index: 100; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(7,17,27,0.8); color: #fff; //弹窗,还是要用绝对定位布局 .detail-wrap{min-height: 100%; //此处需要设置最小高度,使得整体内容充满屏幕 .detail-main{padding:px2rem(64) px2rem(20) px2rem(128); text-align: left; line-height:px2rem(30); } //此处要设置:注意一定要设置padding-bottom值为x,这样可以使得主体内容部分跟屏幕底部始终存在一段距离,用来显示关闭按钮 } .detail-close{position:relative; clear: both; width:px2rem(100); margin: px2rem(-128) auto 0; clear: both; //此处布局关闭按钮,使用相对定位,注意一定要用margin-top:-x,使得关闭按钮在上述内容与底部的空白处 .icon-close{display: block; color: #fff; font-size: px2rem(50);} //关闭按钮样式 } }
转载于:https://www.cnblogs.com/shimily/articles/8795188.html