加overflow:auto不起作用解决办法

已于 2022-08-28 19:36:13 修改
阅读量1.6k 收藏 3
点赞数 2
文章标签： html5 html css
于 2021-08-28 08:19:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405603/article/details/119963362
版权

如果你加的高度是100%，把它改成100vh就好了

原因如下：

     1、% 是相对于父元素的大小设定的比率，用 % 在没有设置 body 高度的话，是无法正确获得可视区域的高度的

     2、vw、vh 是视窗大小决定的，能够直接获取高度

一只蓝胖子~
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
IE6 fixed的完美解决方案
01-19
第一种方法：纯CSS 目前网上有的比较多的是这种解决方案（纯CSS）： 代码如下: html{overflow:hidden;} body{height:100%;overflow:auto;} #rightform form{position:absolute;right:30px;top50px;} 　　这个方法有一个bug未解决：在IE6下会把所有position:absolute都变成“浮动”的元素；还有使用js方法滚动滚动条时会出现对象闪烁，如下方法结合了CSS和js的办法，解决了以上的问题。 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD X
设置overflow:auto无效的解决办法(避坑)
hellozhxyuan
06-15 2569
做项目避免不了使用overflow 但是设置了之后是无效的 这个时候要查看所在的元素是否的父元素是否在所在元素 给父级添加属性 注：宽高大于父级元素的宽高
关于使用overflow-y auto不生效的问题
qq_40703755的博客
12-20 5575
如果父容器高度为百分比，子容器根据父容器百分比设置，整个overflow属性都会失效。实现overflow的效果必须有一个固定高，父容器也必须是固定的高。
使用Element的InfiniteScroll 无限滚动组件报错的解决
12-28
一、问题描述 在使用Element的InfiniteScroll 无限滚动时候出现以下错误： TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’ InfiniteScroll的更多用法element官网 二、解决办法 给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可。 <template> <div class=home> <div v-infinite-scroll=l
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
01-05
原因： -webkit-overflow-scrolling:touch 解释： 由于使用-webkit-overflow-scrolling这个属性，苹果手机会使用硬件加速，从而促使页面滑动得更加流畅，然而也导致了页面出现空白的情况。 解决办法： 滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。 实例： $(#id).css('-webkit-overflow-scrolling','auto'); $(#id).scrollTop(9999); $(#id).css('-webkit-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 5258
css中overflow-x:auto无效
关于使用overflow-y:auto；不生效的问题
Jet_Lover的博客
12-15 1万+
使用overflow-y: auto;不生效
webkit内核-滚动条样式修改，火狐-flex布局下overflow不生效解决，滚动条样式隐藏
roman
07-08 4752
针对webkit内核的浏览器（谷歌、ie、Safari等）： 实现效果： （利用border实现边距） 使用伪类改变滚动条样式 1. ::-webkit-scrollbar 滚动条整体 2. ::-webkit-scrollbar-thumb 滚动条的方块 3. ::-webkit-scrollbar-track 滚动条的轨道 4. ::-webkit-scrollbar-button 滚动条的两端按钮 5. ::-webkit-scrollbar-track-piece 内层轨道，滚动
overflow-x: auto；不起作用
weixin_45936275的博客
05-17 541
【代码】overflow-x: auto;不起作用。
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:
微信小程序overflow:auto; ios设备卡顿问题
01-03
我们在开发微信小程序的时候，经常会使用到overflow:auto;来实现局部滚动效果，稍微注意的码有就会发现，ios真机设备上会有很明显的卡顿，但安卓设置就没这个问题。 解决方式 view{ overflow:auto; -webkit-overflow-scrolling: touch; } 给 overflow 属性添加-webkit- （chrome、safari私有属性） 友情提醒：我推荐你使用微信小程序scroll-view组件实现局部滚动功能，scroll-view微信已经做好了兼容问题，不会出现这种不兼容的问题。用的时候记得给height设值哦
div不能自适应高度不能随图片的高度变化
01-19
在一个网页的栏目模块中，在一个中有几个图片，但是div的高度是0，不能随图片的高度变化。 解决办法，的overflow属性设置成auto 复制代码代码如下: ”content” xss=removed> …</div>
HTML5本地存储账号密码
lulei5153的博客
04-26 642
【代码】HTML5本地存储账号密码。
vue-html5-editor富文本编辑器抓取网络图片本地化
最新发布
w284511883的博客
05-04 122
在研究使用vue-html5-editor的过程中，并没有发现对于复制粘贴过来图片的单独处理，倒是有一个insertImageUrl方法用来处理图片通过url粘贴过来的逻辑，不会重写该方法且该方法只针对通过图片功能上传的方式，因此放弃了。3、调用后台接口，参数为url链接，通过后台接口访问图片链接并保存图片到自己的服务器，然后返回自己的服务器的图片url链接（这块我没有实现，我简单用base64做了测试）；本人基础只是不太扎实，如果有哪里需要优化的可以在评论区一起交流，另外欢迎补充返回url的代码。
用HTML5实现播放gif文件
cnds123的专栏
04-29 616
用HTML5实现播放gif文件
HTML5（1）
cookies_s_的博客
04-28 995
网页制作思路：从上到下，先整体再局部，逐步分析制作分析内容->写代码->保存->刷新浏览器->看效果Vue.js(发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
HTML5废除的元素
yuxingwu9872的博客
04-25 1123
HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，废除plaintex使用“text/plian”（无格式正文）MIME类型替代。applet、bgsound、blink、marquee等标签。废除acronym使用abbr替代。废除rb, 使用ruby替代。2、不再使用frame框架。废除dir使用ul替代。
CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标
2302_77099705的博客
04-30 912
如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
overflow:auto
07-28
overflow:auto是CSS属性，用于设置元素的溢出内容的处理方式。当元素的内容超出其指定的高度或宽度时，溢出内容会隐藏。然而，通过设置overflow:auto，元素将自动显示滚动条，以便用户可以滚动查看溢出的内容。 如果元素的内容没有超出容器的尺寸，滚动条将不会显示。当内容超出容器尺寸时，滚动条将自动出现，允许用户滚动查看隐藏的内容。 例如，假设有一个固定高度和宽度的 `<div>` 元素，并且其内容超出了其指定的尺寸。通过为该元素设置`overflow:auto`，将在需要时显示滚动条，以便用户可以滚动查看隐藏的内容。 ```css div { width: 200px; height: 200px; overflow: auto; } ``` 这样做可以确保元素的内容在超出容器尺寸时仍然可访问，并且不会影响其他元素的布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值