html ul li数目太多不会滚动的超出屏幕看到不到的解决方案

于 2017-08-17 16:48:07 发布
阅读量1.9w 收藏 9
点赞数 6
CC 4.0 BY-SA版权
分类专栏： html奇葩问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/df981011512/article/details/77335083
本文介绍了一种简单的方法来处理网页中列表项超出显示区域的问题，通过为包含多个列表项的元素设置固定高度和滚动条样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


【场景说明】：如下图，如果不作任何处理，我们ul下面的li太多的话，那么就会有部分li超出屏幕。导致我们看不到！（下图是我已经处理好了的！如果不处理是不会有滚动效果的）



【解决方案】：在ul加上如下样式

 style="height:800px;overflow-y:scroll;"   //注意，高度根据自己实际情况定

好了！现在试试吧！

PS：如果发现没效果记得清除一下浏览器缓存，因为有时会因为浏览器缓存导致样式不是我们最新修改的样式！

博客
完整源码停车场管理系统，含新能源充电系统，实现了停车+充电一体化
04-13 958
停车：停车缴费，停车场管理，充电: 智慧停车系统，智慧充电系统、主要实现车辆停车操作管理、车辆充电管理、车辆停车订单管理、停车月卡订单管理、车辆充电卡管理、停车费用余额管理、停车收费规则设定以及停车月卡管理等功能，全面助力停车场实现停车管理的数字化升级、实现停车+充电一体化。智慧停车系统以信息技术为手段、智慧应用为支撑，整合停车场内外资源，使停车操作与办卡相关的管理服务更加高效便捷，实现停车操作自动化和办卡管理智能化
博客
臻识/华夏/芊熠/信路通/大华/海康威视车牌识别相机对接
03-04 1972
臻识/华夏/芊熠/信路通/大华/海康威视车牌识别相机对接
博客
臻识相机，华夏相机，芊熠车牌识别相机加密解密
02-20 3897
臻识，华夏，芊熠这三种车牌识别相机解密我都试过了，可以正常解密成功，其它品牌我暂时没有测试。超级简单，免费的，白嫖无敌！①：先导出配置文件，例如我以臻识为例，导出的文件名为 configbackup00.cfg，导出流程如下如。我使用的api工具调用，使用 postman 或者 apifox等这种工具执行即可！②：调用在线接口进行解密，我发现别人的一个接口可以在线解密，直接白嫖，哈哈。
博客
臻识车牌识别摄像头对接
09-08 6554
一、臻识车牌识别摄像头1.非常有用的官方代码(内部有TCP、HTTP等协议)2.官方常见问题3.官方下载专区二、http对接例子1.自己使用java mock，模拟后台服务，你会用到的配置文件java -jar moco-runner-0.12.0-standalone.jar http -p 80 -c config.jsonconfig.json：如下[ { "request": { "method":"get",...
博客
push master to origin/master was完美解决方案
11-01 1171
也就是本地与远程冲突了，你先确认一下保留远程还是本地代码方案一：保留本地代码，强制push ，注意，这操作会用本地代码强制覆盖远程代码（下面是以master分支为例）git push -u origin master -f方案二：保留远程代码，强制pullgit fetch --all然后，你有两个选择：git reset --hard origin/master或者如果你在其他分支上：git reset --hard origin/<branch_name>..
博客
CentOS7 postgresql安装与使用
10-20 509
CentOS7 postgresql安装与使用安装配置postgresql# 安装[root@vm-06 ~]# yum -y install postgresql-server# 初始化[root@vm-06 ~]# postgresql-setup initdb Initializing database ... OK# 设置postgresql可被远程连接登录[root@vm-06 ~]# vi /var/lib/pgsql/data/postgresql.conf# 第59行
博客
宝塔nginx已经安装了怎么另外安装module
08-07 2184
先查看之前的安装设置项:/www/server/nginx/sbin/nginx -V会显示如下：(你不一定跟我版本一样，所以你显示可能会与我有所差别)nginx version: nginx/1.18.0built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC) built with OpenSSL 1.1.1g 21 Apr 2020TLS SNI support enabledconfigure arguments: --user
博客
ng : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ng.ps1，因为在此系统上禁止运行脚本
04-21 1万+
错误提示:一.我们在win10 系统中有一个搜索框 输入 Windos PowerShellnoted: 一定要选择 管理员身份运行二.打开了命令行之后,输入set-ExecutionPolicy RemoteSigned然后更改权限为A最后通过 get-ExecutionPolicy 查看当前的状态然后 我们在项目组 新开一个cmd 命令行,我们就可以 看到下面的结...
博客
springboot2+dubbo+vue源码+即时通讯源码
04-21 692
【技术要点】：springboot2+dubbo。netty，mysql，redis，mongodb，fastDFS。完全微服务。代码专业，原创，没有任何加密。一键打包脚本(win脚本)，一键启动或者重启所有微服务(shell脚本)【已经实现功能】： ①（聊天功能）：单聊，群聊，用户注册（已整合手机短信），好友添加，获取好友（群）列表，接收好友添加消息，处理好友（群）请求，添加群等诸多功能...
博客
nginx设置跨域
04-02 4322
1.CORS是一个W3C标准，全称是跨域资源共享(Cross-origin resource sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。当前几乎所有的浏览器(Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome 3+)都可通过名为跨域资源共享(Cross-Origi...
博客
centos7安装fastDfs,centos7部署fastDFS
03-26 810
相信网上很多这种教程，但是最近半年个人总结出来算是比较靠谱的，本人已经亲自搭建成功，理论上你不需要动脑筋，直接复制粘贴我的命令就搞定。一：先下载资源：①：下载fastDFS的相关依赖wget https://github.com/happyfish100/libfastcommon/archive/V1.0.7.tar.gz上面命令下载到的文件名是:V1.0.7.tar.gz这样...
博客
java即时通讯im聊天源码,dubbo即时通讯im聊天源码,netty即时通讯im聊天源码,springboot即时通讯im聊天源码
01-10 1234
【后端涉及的框架和技术】：springboot2.1.1, dubbo2.7.3(很新)，netty4，mysql，redis，mongodb，fastdfs，oauth2，swagger2，mybatis源码已经发布到码云上了，希望的童鞋去下载，有不足之处还望指正https://gitee.com/wangdefu/angular_chat【前端涉及的技术和框架】：由于本人...
博客
高校大学生校园app网站源码,校园大学生求职招聘兼职app源码,校园服务app源码,校园php/java网站源码
12-18 3460
本屌丝以前就是做校园代理出身的，最近两年迫于生计转战IT开发行业，以前在学校也想有这么一个牛逼的网站或者系统以及app，找别人开发都是大几十万，一个学生哪来这么多钱呢？自己做又不懂技术，后来暂时将自己的这个梦想给搁浅了，现在终于有能力和机会来开发自己以前梦寐以求的东西，希望能帮到各位想创业的大学生。下载地址在文章底部【更新日期】:2020年1月08日【温馨提示】：php版本已经不再维护和继...
博客
获取微信消息模板列表返回{ errcode: 0, errmsg: 'ok', list: [] }的原因以及解决方法
10-12 1万+
这种没有任何报错却返回为空的基本原因都在你提供post数据有误的问题，【解决方法】：提供的post数据一定得是json字符串，不要直接传数组过去【请求数据例子】：...
博客
angular仿微信聊天|angular手机端IM聊天室|仿微信界面|angular聊天
10-07 1880
【需要源代码请加个人微信】:xw2876001800提供前端和后端技术支持(java/php均可支持)【演示效果】：这是打包之后上传服务器的ng效果，首次加载速度会有点慢，请耐心等待http://www.bester.wang【升级版本】：整合ionic4，支持打包双系统app，接近原生app的体验，真正的即时通讯，真正的聊天app，对任何想整合im的项目都是零侵入性，随时随地整合聊天...
博客
window下生成.pem文件
08-23 4659
首先我要先下载好东西，需要的东西①：perl 这玩意干嘛的呢？就是让你在windows环境下能跟linux环境一样编译和安装东西怎么下载和安装perl？ 先要访问这个地址https://www.activestate.com/products/activeperl/downloads/ 进到里面是不是懵逼了？不管它，点击你要的版本(我怕很多人不懂，所以下面的图有点...
博客
php 出现Class 'IntlDateFormatter' not found 的原因以及解决方案
04-29 2126
废话少说，我们直接给解决方案(某个方案也许并未能解决你的问题，多试试几个方案)解决方案一：(旧版本)把php.ini配置文件里面的这个打开 (修改保存之后记得重启你的apache或nginx和php-fpm,当然低版本php不需要不需要重启php-fpm啦)extension=php_intl.dll如果能解决那就ok，如果提示报错，分两种情况(linux系统和window系统)，...
博客
thinkphp5或者thinkphp3.2的isAjax无效的原因以及解决方案
01-31 2012
【先言】：当你是跨域时，tp内置的这个方法就完全鸡肋了(也就是说无用) 【场景】：①：不跨域，自己增加请求头设置"X-Requested-With"这的值为 "XMLHttpRequest"，至于怎么增加请求头自己去百度，网上一大堆，这里我就懒得写了,加了这个请求头之后就ok了②：跨域， 当为跨域的时候，你是无法增加请求头的，即时你加也是徒劳无功，它不认了。原因是(ajax跨域...
博客
There are multiple modules with names that only differ in casing 出现在angular中的原因及解决方案
01-31 4577
在使用angular的时候有时会报如下的错误There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.Use equal casin...
博客
php无法加载intl.dll的原因以及解决方案
09-14 6926
php_intl.dll' - 找 不到指定的模块。 in Unknown on line 0 很多人遇到这个都是无法解决的。这篇是windows系统的解决方案，如果你是linux系统，请看我这篇https://blog.youkuaiyun.com/df981011512/article/details/89678763【情况描述】：ext文件夹下明明有这个动态链接库，php.ini相关的扩展配置也开...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值