子元素设置100vw出现横向滚动条的问题

最新推荐文章于 2024-08-27 17:52:59 发布
最新推荐文章于 2024-08-27 17:52:59 发布
阅读量376 收藏
点赞数 3
分类专栏： CSS实战 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/136268204
版权

100vw等于浏览器的视口宽度（如果有滚动条，视口宽度包含滚动条宽度）

image.png

对于浏览器来说，有任何一个元素无法在视口内显示，浏览器就会自动加滚动条，当浏览器出现 y轴 滚动条的时候，这个时候 100vh视口宽度是包含滚动条的宽度的 ，但是如果我们的父元素宽度是100%（不含滚动条宽度），但是子元素是100vw（含滚动条宽度），这个时候设置子元素的100vw（含滚动条宽度）肯定是要超过父元素宽度，出现滚动条的

解决办法

开发过程中100vw少用，块级标签(不开启flex，float、position)的时候宽度默认就是100%，100vw没啥用，一般不要设置什么，如果即使用到了，也要加上max-width:100%控制下

扶苏1002
关注
专栏目录
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1753
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
大屏自适应遇见的bug
qq_45970524的博客
06-27 492
第一种解决方案是将body的上下左右外边距都设置为0。（注意如果有body有任何一个方向的外边距不为0，都会可能导致横向和纵向都出现滚动条，这是因为横向的滚动条的出现会使视口的高度变高，纵向滚动条的出现使得视口宽度变宽。） 第二种解决方案是给绿色盒子设置max-width:100%使得横向滚动条消失。 第三种解决方案是给body元素设置溢出隐藏（overflow:hidden) 第四种解决方案是给html元素设置溢出隐藏overflow:hidden) 2、设置宽width与最大宽度max-width100
css 100vw、100vh出现滚动条怎么解决
热门推荐
m0_52726759的博客
02-13 1万+
css，100vw、100vh滚动条问题
解决CSS 100vw布局出现滚动条问题
qq_36560875的博客
08-23 5277
前些天做了一个移动端活动页面，采用了100vw来充满屏幕。后来发现竟然可以左右滑动，还出现了滚动条。 上网收了一下 解决了：记录一下，以后懒得再找。有幸看到的童鞋可以按如下css代码解决。 html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow:
移动端100vh超出页面出现滚动条问题
qq_55139096的博客
08-08 274
当移动端想要占满屏幕时通常会使用100vh,但是在手机端访问网站时会发现超出的屏幕宽度并出现了滚动条。这是因为移动浏览器（Chrome和Safari）地址栏有时可见有时隐藏，从而改变了视口的可见大小。当视口高度变化时，这些浏览器没有将。高度没变，但是地址栏那块把内容顶出去了一块）。结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时。结局方案2：使用dvh单位(需要考虑兼容性)设置为隐藏了地址栏的浏览器的高度（其实就是。的高度调整为屏幕的可见部分的高度，而是将。然后在需要全屏的页面使用变量。
基于vue解决 100vw 和 100vh出现滚动条的问题
zjslan_js的博客
07-15 5505
基于vue解决 100vw 和 100vh出现滚动条的问题
Css 设置vw和vh=100% 出现滚动条，内容超出视口 原因及解决
qq_40071931的博客
02-27 1137
如图，而背景视频超出部分和滚动条一样宽，而宽度不包含滚动条(即视口宽度-滚动条宽度)，div.outer 超出 html 的部分宽度正好为一个 margin 宽度 + 一个滚动条宽度。检查发现， 含有8px的margin，body > div#app > div.outer，div.outer和视口一样大，又往右下角偏移了8px，故使页面内容超出视口大小导致出现滚动条。滚动条一般不影响视口大小，故滚动条区域也属于视口内，背景视频略超出“可视范围”应该是部分被滚动条遮盖。
PC端项目中 vw 带来横向滚动条的问题
zk_html的博客
11-05 1227
Windows 系统中的滚动条是会占据视口空间的。在 MacOs 系统中，当不滚动页面时，滚动条默认是隐藏的。它们也不占据任何的视口空间，这就表示 100% 的body宽度等于 100% 的屏幕宽度。在 Windows 系统中，滚动条的宽度会从窗口的宽度中减掉（一般是17px宽）。vw 单位忽视了滚动条占据视口空间（滚动条是不会影响vw单位计算的），还是计算整个视口的宽度。
vue 左侧栏拖拽右侧宽度不变；出现滚动条
周家大小姐
04-23 2640
demo地址:点击下载 其中封装了自定义指令及公共组件的左侧菜单,菜单效果为双击,可搜索子节点 用户需求,左侧菜单为一次加载出来;可以搜索树控件下所有的子菜单内容 1.左侧菜单可以自由拉宽缩小;右侧内容不变,本人用到的方法是右侧div中嵌入router-view才能做到不缩放 1.左侧菜单默认为200的宽;拉条为15的宽当小于200的时候右侧动态设置宽度,不让右侧空出来 ```views views ├─ AboutView.vue └─ HomeView.v...
全屏响应式文章水平横向布局
03-17
通过设置display: flex，可以将容器内的子元素沿主轴（默认为水平方向）排列，实现水平滚动。利用flex-wrap属性，我们可以决定内容是否换行，以适应不同的屏幕宽度。 4. **Overflow-X与Overflow-Y**：为了实现水平...
vw:考虑到滚动条的更好的大众和大众单位
04-28
视口宽度 :dna: 关于视口宽度 注意：尽管有此名称，此程序包可同时适用于视口的宽度和高度单位 该软件包旨在解决CSS中视口单元的常见问题。 这些仅是百分比单位，始终相对于视口保持不变。 . wrap { width : 800 px ; position : relative; } . wrap img { width : 100 % ; } . wrap . alignfull { width : 100 vw ; position : relative; left : 50 % ; transform : translateX ( -50 % ); } 在上面的示例中， img将具有100％的父级宽度，即800px而任何具有alignfull类的alignfull将具有100％的视口。 这是在较窄的容器内制作全宽部分的简单解决方案：元素相对放置，允许我们通过将left:
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3178
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
html页面刷新滚动条高度为0,为什么css设置页面高度100vh会出现滚动条
weixin_34759094的博客
06-03 2429
如下，预期效果满屏都是红色，没有滚动条。.div{height:100vh;backgroud:red;}实际效果是会有滚动条，因为body 有默认的 8px 的margin，清掉就好了body{margin:0;}.div{height:100vh;backgroud:red;}这也只是在部分情况下奏效，在有些设备上还是有问题的。比如移动端 ios的safari浏览器或者android端手机...
uniapp页面高度100vh出现滚动条
weixin_62639453的博客
01-06 1697
问题描述：页面内容元素不多，一页足以装的下，但是又不希望页面出现滚动条，只让他保持一页展示即可。本来想让页面铺满没有溢出产生滚动条，但是实际进行开发的时候发现就算给了页面最大的父亲盒子高度10vh（实际屏幕尺寸），还是会产生滚动条。
iOS Safari 浏览器 100vh 带有滚动条解决方案
卡尔特斯
09-10 3979
问题场景 在移动端 safari 或者 chrome 浏览器中，使用 100vh，会出现滚动条。 根本原因 在 safari 和 chrome 浏览器中，100vh 是指去掉地址栏的高度，所以会出现滚动条。 解决方案 移动端一般不考虑 chrome 浏览器，用户基数小，如果只考虑微信公众号开发也不用考虑这个问题。如果需要考虑 safari 浏览器的用户体验，建议使用 100% 替代 100vh，或者使用 js，而不是 100vh。 ...
创建vue组件时高度为100vh时出现纵向滚动条
最新发布
m0_58889179的博客
08-27 216
在index.html中添加 margin: 0;padding: 0;原因body自带margin属性。
iOS Safari 浏览器 100vh 带有滚动条解决方案，2024年最新秋招是不是得到处面试
2401_84139963的博客
04-17 600
不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！浏览器，用户基数小，如果只考虑微信公众号开发也不用考虑这个问题。它和其它框架（jquery）的区别是什么？描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？Vue 的 nextTick 的原理是什么？是指去掉地址栏的高度，所以会出现滚动条。组件中写 name 选项有什么作用？浏览器的用户体验，建议使用。Vue 中 key 值的作用？
解决 iOS Safari 中 100vh 引发的滚动条问题
m0_37622071的博客
03-08 2289
在移动端网页开发中，iOS Safari 中的视口高度单位 100vh 常常引发一个奇怪的现象：即使内容并不溢出，仍然会出现垂直滚动条。这种问题给开发者带来了布局上的困扰。本文将探讨这个现象的原因，并提供解决方案，让开发者能够更好地处理这个挑战，确保页面在 iOS Safari 上的正常呈现。
使用css的100vw出现滚动条
05-03
使用CSS的100vw可能会出现滚动条的情况，主要原因是浏览器的滚动条宽度会占用一定的视口宽度。可以使用以下方法解决： 1. 使用CSS的calc()函数计算视口宽度，例如： ``` width: calc(100vw - 17px); ``` 其中，17...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值