关于使用overflow-y:auto；不生效的问题

最新推荐文章于 2024-05-21 10:56:02 发布
最新推荐文章于 2024-05-21 10:56:02 发布
阅读量1.2w 收藏
点赞数 9
分类专栏： 开发 文章标签： css3 css 前端 html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jet_Lover/article/details/121957321
版权

今天改bug，发现设置了overflow-y:auto，但是却不生效。
在这里插入图片描述
如图我设置了overflow-y:auto却不生效，百度了，说什么写了
overflow: hidden;position: relative;我试着将这div的父元素，子元素的overflow: hidden和position: relative删了都不生效
请添加图片描述

最后从最外面的父元素开始找，发现了一个大问题！！！
在这里插入图片描述
最外层的元素高度跟子元素一样，这样就没法实现子元素滚动了！
请添加图片描述
最后一层一层的设置外层父元素的高度，然后就可以实现了！
最后看效果图：
在这里插入图片描述
这就可以实现了！
请添加图片描述

总结：使用overflow-y:auto跟初始化地图一样，外层也要设置高度，并且高度要小于设置了overflow-y:auto的div元素。

假如子元素高度为2000px,那么设置overflow-y:auto的父元素高度必须小于2000px！！！
请添加图片描述

Jet_closer
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
overflow-y:auto 回到顶部
didiedou3444的博客
03-28 1850
overflow-y 　　　　内容溢出元素框时发生的事情。 overflow-y:auto 内容溢出元素框时自动出现滚动条，滑动滚动条显示溢出的内容。 滚动条回到顶部 var container = $('#id');//获取元素 $(container).scrollTop(0);//滚动条回到顶部 1 <!DOCTYPE HTML P...
CSS中overflow-y: visible;不起作用的原因分析及解决方法
09-22
小编最近遇到这样的需求，移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片...接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法，需要的朋友参考下吧
overflow-y:auto;不生效的问题
TU_BO的博客
04-04 9270
今天进行一个页面的样式调试,发现overflow-y:auto;不生效 最后发现是overflow-y:auto;对table标签不生效,如果要对一个table进行滚动,必须在table外加一层div,然后对其设置高度 页面代码 <div class="myclass"> </div> css样式代码 .myclass{ overflow-y:auto; ...
关于使用overflow-y auto不生效的问题
qq_40703755的博客
12-20 6135
如果父容器高度为百分比，子容器根据父容器百分比设置，整个overflow属性都会失效。实现overflow的效果必须有一个固定高，父容器也必须是固定的高。
解决父元素overflow-y:auto，x轴无法溢出的问题
最新发布
weixin_45962094的博客
05-21 406
ie6不支持fixed定位，但是ie11的确是支持的，几乎翻遍了所有相关的解答，都没有人遇到这个问题，于是打开F12一个个元素进行排查，看看到底是哪个属性冲突了。经过排查后，发现问题出在当父元素设置了overflow-y:auto，x轴只能是hidden，无法设置为visiable，所以子元素的溢出会被隐藏，这个机制就是这样，只能曲线救国了。ps：博主还踩了一个巨大的坑，这个方法在谷歌、火狐等浏览器都没有问题，但在ie11上行不通，子元素的溢出还是被隐藏了，fixed定位都不起效。
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 可加可不加，自己试...
ie6 overflow:auto不起作用的情况
管子（zero）的杂乱空间
10-23 1090
今天遇到一个比较特殊的情况：ie6下设置overflow:auto不起作用，在火狐下正常显示。ie下滚动条是出来了，但是内容却跑到下面去了，滚动条行同虚设。网上搜索了一下都说是设置高度和宽度就ok了，开始还以为是百分比高度引起的，但设置成绝对高度200px后还是不行。最后通过经验判断出原来是overflow的那个div没有position定位，给加了个定位和top,left属性后一切都正常了！汗，
overflow-y: auto；解决页面出现滚动条导致背景色未铺满的情况
qq_41910413的博客
04-20 2037
前端页面会遇到页面要设置全局背景色，但是一旦内容过多，页面出现滚动条，就会发现，怎么滚动到下面，背景色不是全部铺满的，超出一屏的内容是没有背景色的。这时候就可以给页面最外层标签加上。就会发现背景色被完全铺满了。
overflow-y:auto(隐藏滚动条)
m0_61096379的博客
08-27 2127
滚动条隐藏
div和table横向和纵向滚动条问题
09-20
同时，为了避免与表格内部的纵向滚动条冲突，`div`的`overflow-y`属性设置为`hidden`。此外，需要设置`div`的固定宽度，例如`1000px`，确保在`table`宽度超出时触发横向滚动。 然而，直接设置`table`的`width`属性...
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
3. **修复CSS布局**：确认`scroll-view`的`overflow`属性设置为`auto`或`scroll`，并确保没有其他布局属性（如`position`、`z-index`）影响背景渲染。 4. **利用微信小程序特性**：在微信小程序中，可以尝试使用`...
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:
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
11-26
` 防止了 Bootstrap 默认的滚动条样式影响，而 `overflow-y: auto;` 则确保了在模态对话框打开时，页面仍然可以正常垂直滚动。 除了 Bootstrap Modal 本身的问题外，另一个常见的问题是 Bootstrap Datepicker 在 ...
bootstrap多层模态框滚动条消失的问题
08-29
解决这个问题的方法是，直接在模态框的 div 元素上添加 style="overflow: auto"，这样可以让模态框的滚动条不依赖 body 元素的 modal-open class。例如： <div class="modal fade" id="myModal2" data-backdrop=...
设置overflow:auto无效的解决办法(避坑)
hellozhxyuan
06-15 2689
做项目避免不了使用overflow 但是设置了之后是无效的 这个时候要查看所在的元素是否的父元素是否在所在元素 给父级添加属性 注：宽高大于父级元素的宽高
编译支付宝小程序 设置页面滚动时 overflow-y: auto不生效
qq_44990124的博客
08-05 878
设置页面滚动时 不能设置overflow-y: auto;要设置overflow-y: scroll;
overflow：auto失效
蔡徐坤加入博客园的博客
12-24 831
如果是div，可能是div宽度和高度没有写，所以overflow失效
加overflow:auto不起作用解决办法
qq_43405603的博客
08-28 1781
如果你加的高度是100%，把它改成100vh就好了 原因如下： 1、% 是相对于父元素的大小设定的比率，用 % 在没有设置 body 高度的话，是无法正确获得可视区域的高度的 2、vw、vh 是视窗大小决定的，能够直接获取高度 ......
overflow-y:hidden;overflow-x:auto;无效？解决方法
qq_34332073的博客
12-03 1万+
overflow-y:hidden;overflow-x:auto;无效？ 注意：子元素不能浮动； 父元素不能使用display：flex; 还有一种情况：就是自动换行了，，，试着加个white-space:nowrap;
overflow-y: auto
04-05
The CSS property `overflow-y: auto` sets the overflow behavior of the vertical axis of an element's content. When the content of an element exceeds its height limit, this property determines whether the browser should show a vertical scroll bar or not. When `overflow-y` is set to `auto`, a vertical scroll bar will only appear if the content within the element overflows its height limit. If the content fits within the element's height limit, no scroll bar will be displayed. Here's an example of `overflow-y: auto` in action: ```css .container { height: 200px; overflow-y: auto; } ``` In this example, the `.container` element has a height limit of 200 pixels. If the content within the container exceeds this limit, a vertical scroll bar will appear. If the content fits within the height limit, no scroll bar will be displayed. Overall, `overflow-y: auto` is a useful CSS property for controlling the overflow behavior of an element's content on the vertical axis.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jet_closer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值