社区
CSS
帖子详情
如何让固定定位可以滚动?
tomorrow93
2017-07-31 04:08:29
如上图,优惠券我用的是固定定位 position:fixed,bottom:0。
无论页面怎样滚动它始终显示在下方。
但是,优惠券一旦多起来,比如说有11个优惠券,那么这11个优惠券是不能滚动的,我想让他能滚动该怎么做?
...全文
760
3
打赏
收藏
如何让固定定位可以滚动?
如上图,优惠券我用的是固定定位 position:fixed,bottom:0。 无论页面怎样滚动它始终显示在下方。 但是,优惠券一旦多起来,比如说有11个优惠券,那么这11个优惠券是不能滚动的,我想让他能滚动该怎么做?
复制链接
扫一扫
分享
转发到动态
举报
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
ScrollableTable.js
只需简单地引入JS文件,就可以让表格自动适应页面的
滚动
行为,这大大简化了开发者的工作流程。通过在HTML中添加`<script>`标签引用`ScrollableTable.js`,开发者可以轻松地使表格具备
滚动
功能,使得用户能够方便地...
android快速滑动列表+首字母提示(仿通讯录,iphone)
这个功能让用户能够迅速定位并选择所需的联系人,通过滑动右侧的字母栏,列表会自动
滚动
到对应首字母的联系人。下面我们将详细探讨如何构建这样一个功能。 首先,我们需要一个ListView或RecyclerView作为列表的基础...
Android 仿美团网的购买布局效果
`StikyScrollView`可能是自定义的一个
滚动
视图,它允许顶部的购买项在
滚动
时保持固定,就像美团的“置顶”效果。自定义View需要重写`onDraw()`方法绘制UI,以及`onMeasure()`和`onLayout()`方法来确定尺寸和位置。 ...
Android ListView标题置顶效果
然而,当用户
滚动
列表时,经常需要保持某些特定项(如标题)始终显示在顶部,以便用户能快速定位和理解当前显示的数据区域。这就是所谓的“标题置顶效果”。本教程将深入探讨如何在Android中实现ListView的标题置顶...
多年收集的 JavaScript、jQuery 插件、UI 集合,值得温故知新的前端学习旅程
9. **JS
滚动
栏定位.html**:这个文件可能讲解了如何基于页面
滚动
位置执行某些操作,比如固定导航栏或高亮当前选中的导航项,这需要用到JavaScript的
滚动
事件和计算元素相对视口的位置。 10. **禁止网页复制的代码....
CSS
61,129
社区成员
60,711
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章