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

当父容器高度设置为百分比时,子容器依据父容器高度设置的overflow-y:auto或overflow-x:auto属性可能导致滚动失效。解决方法是将父容器的高度设置为固定值。博客总结指出,实现overflow效果必须存在固定高度,且父容器也需要固定高度。
摘要由CSDN通过智能技术生成

我们都知道想要实现局部滚动,就得用css中overflow-y:autooverflow-x:auto属性,实现纵向/横向滚动。使用这个属性的必备条件就是给这个局部滚动的视窗一个固定的高。

1.失效场景

父容器高度设置的是百分比在这里插入图片描述

子容器根据(父容器高度 - tabBar栏) 设置固定高度,溢出滚动 失效。

在这里插入图片描述

2.解决方案

在这里插入图片描述

给父容器设置固定高度,不要用设置百分比。

3.总结

如果父容器高度为百分比,子容器根据父容器百分比设置,整个overflow属性都会失效。
实现overflow的效果必须有一个固定高,父容器也必须是固定的高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值