61,126
社区成员
发帖
与我相关
我的任务
分享如何让固定定位可以滚动？
如上图，优惠券我用的是固定定位 position：fixed，bottom：0。
无论页面怎样滚动它始终显示在下方。
但是，优惠券一旦多起来，比如说有11个优惠券，那么这11个优惠券是不能滚动的，我想让他能滚动该怎么做？
...全文
请发表友善的回复…
发表回复
YoungSave 2019-07-01
- 打赏
- 举报
##Css Skicky Footer 布局
+ 页面结构
<div v-show="detailShow" class="detail"> //最外层盒子
<div class="detail-wrapper clearfix"> //内盒子 需要清楚浮动 clearfix
<div class="detail-mian"> //内容区域
内容区域
</div>
</div>
<div class="detail-close"> //关闭按钮
<i class="icon-close"></i>
</div>
</div>
+ 页面样式
<style>
.clearfix {
display: inline-block;
&:after {
display: block;
content: '.';
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
}
.detail {
position: fixed; // 不可缺少
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%; //总容器为全屏，所以高度为100％
overflow: auto; //如果内容太长，会显示滚动条查看其余内容。
.detail-wrapper {
min-height: 100%; //如果内容不够长时，也保证内容有全屏长度
.detail-mian {
margin-top: 64px;
padding-bottom: 64px; // 不可缺 //保证内容content区域的底部有64px的空白
}
}
.detail-close {
position: relative;
margin: -64px auto 0 auto; // 不可缺少 //让关闭按钮向content－wrapper里面伸入64px，正好把内容区的64px空白补上；
clear: both;
}
}
</style>
霜月枫桥 2017-08-01
- 打赏
- 举报
因为没有代码，我这里假设<div class="pic1"></div>便储存一个你的优惠券
你这里有两个优惠券，便是
<div class="pic1"></div>
<div class="pic2"></div>
上面是你原来的代码，现在，根据新需求，修改原代码如下：
<div class="all">
<div class="pic1"></div>
<div class="pic2"></div>
</div>
然后CSS设置<div class="all">绝对定位，然后按照设计，再给它设一固定高度，代码如下：
.all{
position:fixed;
bottom:0;
height:100px; //假设，具体你自己改
overflow:auto; //优惠券多时，进行滚动
}
___紫菜 2017-07-31
- 打赏
- 举报
里面再用一个容器放优惠券列表，然后给容器overflow:scroll
