ul高度100%，li滚动不了

已于 2023-06-02 11:13:27 修改
阅读量332 收藏
点赞数
文章标签： 前端 html css
于 2023-06-02 11:12:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38916157/article/details/131003252
版权

前情提要：必须在ul中设置overflow

问题：设置固定高度时，可滚动，高度设置为100%时，滚动不了
解决方案：外层出现无高度div，删除或给该div设置高度

——————————问题原因—————————————
前情提要：div的高度不可以继承(宽度可以继承)

ul设置固定高度时，元素溢出overflow生效
外层高度未继承，ul高100%，将高撑开，元素未溢出，overflow不生效

凡人繁星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue滑动页面时固定ul
weixin_35750747的博客
01-05 132
如果您想在 Vue 中实现固定滑动列表，可以使用 CSS 的 position: fixed 属性。例如： <template> <div> <ul class="fixed"> <li>列表项1</li> <li>列表项2</li> <li>列表项3&l...
css设置高度height: 100%滚动条无法显示的解决办法
飞飞程序员
05-12 5621
有是在写样式的时候，会碰到给div无论怎么加样式 overflow-y: auto 的时候，都不会出现垂直的滚动条，经过不断折腾终于知道是啥原因导致了。 <style> body{ height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出现滚动条 } .parent{ //你自己样式 height: 100%; //父元素的高度也需要是100%才可以出现滚动条 } .children{ overflow-y: auto; overflow-x: hi
父元素设置min-height，子元素设置高度100%失效问题，并设置超出横向滚动条
qq_52912134的博客
12-08 695
父元素设置min-height，子元素高度设置为100%
iscroll不能滑动的一个原因
maohuihua的专栏
05-11 5839
今天在做项目时，碰到一个很蛋疼的问题。iscroll不能滑动。iscroll的高度始终为0. 开始以为是加载的问题。在dom初始化完毕之前，初始化了wrapper，后来发现不是。 网上有文章说，是wrapper的高度要小于iscroll的高度才行，我试了一之后，发现还是不能滑动。 最后一个大牛帮我解决了，是iscroll中的table的样式position设为了absolute，脱离了文档流
当ul中内容超出范围时 自动添加滚动条
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
10-28 4029
html 代码 <ul class="ul"> <li class="num"> <span class="Nameofjudges"> 一号 </span> <span class="fraction"> 63 </span> </li> <li class="num">
css中overflow属性失效，页面始终不能滚动显示溢出的内容
weixin_51248307的博客
01-10 3256
如果overflow设置正确，出现这种问题大抵是因为position属性的设置为了fixd，这导致页面中的内容相对于页面是一定的，包括溢出的内容，他也在页面的某一个位置。而页面滚动本质上页面这个panel没有变，变的是显示的内容，所以既然元素是fix的，那滚动就相当于要破坏这个fixd，所以导致overflow失效。
ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏
09-25
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
js不间断滚动的简单实现
10-22
这个`<div>`内部有一个`<ul>`列表，其中包含多个`<li>`元素，每个`<li>`元素代表一行要滚动的内容。 ```html <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> ... </ul> ``` 接下来，...
Js+CSS实现的间断和不间断文本滚动代码
10-28
代码中包含两个具有类名为 "box" 的 `<div>` 元素，每个 `<div>` 内部都有一个 `<ul>` 无序列表，列表中包含若干个 `<li>` 列表项，分别表示要滚动的文字行。 CSS 部分主要用来定义这两个盒子的样式。`.box` 类设定...
仿新浪微博高度自适应无缝滚动
12-06
1. **布局设置**：HTML结构应清晰，内容通常包裹在一个固定高度的容器内，容器内部的ul元素包含了所有待滚动的li（列表项）元素。 2. **CSS样式**：通过CSS控制ul元素的高度，使其能完全容纳一个li元素，其余的li...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
首先，Vue组件的核心是模板，这里我们看到一个`template`部分，包含两个主要元素：一个`ul`列表作为tab导航，另一个`div`作为内容展示区域。每个`li`元素代表一个tab，通过`@click`事件监听用户的点击，并用`:class`...
设置ul li内容自动上下滚动
03-03
可以设置的内容上下滚动，很好的东西哦
html ul li数目太多不会滚动的超出屏幕看到不到的解决方案
热门推荐
df981011512的博客
08-17 1万+
【场景说明】：如下图，如果不作任何处理，我们ul下面的li太多的话，那么就会有部分li超出屏幕。导致我们看不到！（下图是我已经处理好了的！如果不处理是不会有滚动效果的） 【解决方案】：在ul加上如下样式 style="height:800px;overflow-y:scroll;" //注意，高度根据自己实际情况定 好了！现在试试吧！ PS：如果发现没效果记得清除一下
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题...
sfkong31893189的博客
01-15 1179
web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden...
ul li横向滑动设计
weixin_36448423的博客
09-23 2634
&lt;style&gt; .container-wrap { width: 100%; height: 50px; background-color: rgba(0,0,0,0.8); white-space: nowrap; overflow: hidden; overflow-x: scroll; /* 1 */ ...
css中ul标签高度超过li标签,li浮动时ul高度为0，解决ul自适应高度的几种方法
weixin_34366539的博客
08-03 2179
在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度，即ul标签添加height属性，代码如下:ul {list-style-type: none;height: 30px; /*添加高度属性*/...
移动端UL列表无法平滑向下滚动问题
weixin_30763455的博客
10-30 768
问题说明: 移动端向上滑动后,,列表无法自动滚动到底部~~而是类似屏幕"沾手"的效果(手离开屏幕直接停止在当前~列表不会自动向下滚动一段) 问题原因: 页面中存在如下代码: 当前页面,overflow:hidden超出后自动隐藏属性 解决:删除完事儿 转载于:https://www.cnblogs.com/mangwusuozhi/p/9877141.html...
ul li 自动滚动
最新发布
09-04
要实现 ul li 自动滚动，可以使用 CSS 和 JavaScript 来完成。下面是一个实现的示例代码： 1. 首先，在 HTML 中创建一个 ul 列表，并为其添加一个 ID： ```html <ul id="scroll-list"> <li>第一条内容</li> <li>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值