如何让固定定位可以滚动?

tomorrow93 2017-07-31 04:08:29


如上图,优惠券我用的是固定定位 position:fixed,bottom:0。

无论页面怎样滚动它始终显示在下方。

但是,优惠券一旦多起来,比如说有11个优惠券,那么这11个优惠券是不能滚动的,我想让他能滚动该怎么做?
...全文
760 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
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

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧