设置overflow:auto无效的解决办法(避坑)

最新推荐文章于 2024-10-25 11:36:33 发布
最新推荐文章于 2024-10-25 11:36:33 发布
阅读量2.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45010908/article/details/117930709
版权
当CSS设置的overflow属性在项目中不起作用时，可能是因为元素的父级尺寸限制。解决方法是检查并确保父元素的宽高大于子元素，通过添加相应的样式来调整。这涉及到CSS布局和定位的知识，正确理解盒模型和元素层级对于解决此类问题至关重要。
摘要由CSDN通过智能技术生成

做项目避免不了使用overflow 但是设置了之后是无效的
这个时候要查看所在的元素是否的父元素是否在所在元素
给父级添加属性 注：宽高大于父级元素的宽高

hellozhxyuan
关注
ie7中overflow:auto无效的解决方法
12-13
产生原因当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:auto属性就会失效。 解决办法解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 代码bug重现 复制代码代码如下:<ul><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li></ul> 复制代码代码如下:ul{overflow:
详解CSS中zoom属性或overflow:auto属性清除浮动的作用
11-21
为了解决这个问题，我们可以利用`zoom`属性（在IE浏览器中）和`overflow:auto`属性（在非IE浏览器中）来实现浮动元素的清除。 `zoom`是Internet Explorer浏览器的一个专有属性，它允许我们设置或检索对象的缩放比例...
加overflow:auto不起作用解决办法
qq_43405603的博客
08-28 1953
如果你加的高度是100%，把它改成100vh就好了 原因如下： 1、% 是相对于父元素的大小设定的比率，用 % 在没有设置 body 高度的话，是无法正确获得可视区域的高度的 2、vw、vh 是视窗大小决定的，能够直接获取高度 ......
关于使用overflow-y auto不生效的问题
qq_40703755的博客
12-20 7187
如果父容器高度为百分比，子容器根据父容器百分比设置，整个overflow属性都会失效。实现overflow的效果必须有一个固定高，父容器也必须是固定的高。
overflow:auto 不生效的原因
热门推荐
sdewendong的专栏
11-24 3万+
今天给我的一个div加滚动条的样式，overflow:auto ，死活不生效。 最后发现问题：为div指定overflow属性为auto没问题，但是必须指定div的高度，例子： &lt;div style="position:absolute; height:300px; overflow:auto"&gt; &lt;/div&gt; position:absolute 可加可不加，自己试...
css中overflow-x:auto无效
Amouzy的博客
02-25 5875
css中overflow-x:auto无效
overflow：auto失效
蔡徐坤加入博客园的博客
12-24 884
如果是div，可能是div宽度和高度没有写，所以overflow失效
解决css上overflow:auto不生效问题
最新发布
weixin_45036647的博客
10-25 497
拿到前辈的代码屎山时，想要在一个div上添加属性overflow:auto;发现有滚动条但不滚动的问题。（无滚动效果）
css中overflow:hidden失效问题的解决方法
11-21
今天在写轮播图的时候发现，overflow;hidden;竟然能失效，发现原因如下：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:...
设置flex:1下的flex:1后设置overflow：auto无效
05-30
当你在一个 `flex` 子元素上设置 `flex: 1` 和 `overflow: auto` 时，如果该子元素的内容不足以填满父元素，则该子元素的高度将被设置为父元素的高度，因此 `overflow: auto` 将不会起作用。 解决这个问题的方法是...
关于使用overflow-y:auto；不生效的问题
Jet_Lover的博客
12-15 1万+
使用overflow-y: auto;不生效
IE6下overflow:auto失效
郁辰磊的前端技术分享
11-11 2190
使用div模拟弹出窗口 遇到一个这样的问题，在ie6下 调整div大小时，overflow:auto有时会失效 场景 当外层out，resize到150*150时，会出现垂直滚动条 但当resize到100*100时，垂直和水平滚动条都消失了 经过多次尝试，发现在IE6下，要使overflow:auto有效，宽度高度一定都要有值（即使
overflow-y:auto;不生效的问题
TU_BO的博客
04-04 9376
今天进行一个页面的样式调试,发现overflow-y:auto;不生效 最后发现是overflow-y:auto;对table标签不生效,如果要对一个table进行滚动,必须在table外加一层div,然后对其设置高度 页面代码 <div class="myclass"> </div> css样式代码 .myclass{ overflow-y:auto; ...
ie6 overflow:auto不起作用的情况
管子（zero）的杂乱空间
10-23 1124
今天遇到一个比较特殊的情况：ie6下设置overflow:auto不起作用，在火狐下正常显示。ie下滚动条是出来了，但是内容却跑到下面去了，滚动条行同虚设。网上搜索了一下都说是设置高度和宽度就ok了，开始还以为是百分比高度引起的，但设置成绝对高度200px后还是不行。最后通过经验判断出原来是overflow的那个div没有position定位，给加了个定位和top,left属性后一切都正常了！汗，
微信body和弹出层都有滚动条，overflow:auto失效解决方案。
zhaozilong666的博客
08-06 1701
1. 禁止body滚动后，弹出层滚动overflow:auto失效； var DivScroll = function( layerNode ){         //如果没有这个元素的话，那么将不再执行下去         if ( !document.querySelector( layerNode ) ) return ;         this.popupLayer = docume...
编译支付宝小程序 设置页面滚动时 overflow-y: auto不生效
qq_44990124的博客
08-05 979
设置页面滚动时 不能设置overflow-y: auto;要设置overflow-y: scroll;
关于HTML下overflow-y:auto无效、清除HTML默认边距、解决去除手机访问网页时的左右多余空白的三个方法汇总
sinolzeng的专栏
11-22 1万+
在html中，如果想让某个子DIV出现over-flow
React中overflow: auto 失效的问题解决
wdquan19851029的专栏
10-20 1571
内容已经溢出了屏幕，但是滚动条还是不出现，这个问题让人很不爽呢 先看下面内容，将JsonEditor组建渲染到元素<divid="jsoneditor"className="jsoneditor-react-container"/> 1.html内容： <div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height:'calc(100% - 15px)'}}...
设置overflow auto后，elementui的backtop不生效
weixin_42598278的博客
02-12 182
如果在Element UI中的backtop组件上设置了overflow: auto，那么backtop就不会生效。这是因为overflow: auto会导致元素的溢出内容被修剪，并且可以通过滚动条查看。因此，如果backtop组件的位置在已修剪的内容中，它将不可见，并且不会起作用。为了解决这个问题，你需要在backtop组件上添加一个position：fixed属性，使其始终位于视图中。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值