使用vw,vh导致web窗口出现滚轴，没有全屏

最新推荐文章于 2023-06-22 23:59:41 发布
最新推荐文章于 2023-06-22 23:59:41 发布
阅读量341 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41735632/article/details/115520153
版权

全局一个div
设置position为absolute绝对定位
top:0;
left:0;
问题解决
问题原因：网上搜是因为web端使用vw,vh把滚轴的距离也算进去了,移动端不会出现这个问题.

撸串吴先生
关注
可视化项目使用vw/vh布局进行适配
weixin_54423679的博客
12-02 976
vue可视化项目，适配vw/vh方法
【项目经验】：vue的PC端项目中通过vw做页面自适应，改变屏幕分辨率后页面混乱
最新发布
weixin_70245286的博客
08-21 769
vue的PC端项目中通过vw做页面自适应，改变屏幕分辨率后页面混乱的解决方法
css3 vw -----解决页面滚动出现跳动的bug
weixin_30790841的博客
02-07 344
100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。 demo： h1{font-size:8vw;} 如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即200/100*8mm CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动 .wrap-oute...
Vue项目CSS使用vw和vh占满页面产生边距
我比狗困
06-22 226
解决方法：修改index.html中的样式。
css 100vw、100vh出现滚动条怎么解决
热门推荐
m0_52726759的博客
02-13 1万+
css，100vw、100vh滚动条问题
vue-cli3.0项目中使用vw方案
weixin_42787527的博客
12-10 727
转载于：https://segmentfault.com/a/1190000019812737
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
css3新单位vw、vh的使用教程
09-24
此外，若要将整个页面元素的尺寸设置为视口的100%，比如让背景图或模态框等元素占满整个视口，可以使用100vh的高度和100vw的宽度，这样可以使元素在视觉上完全覆盖整个浏览器窗口，提供全屏体验。 在使用视口单位...
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
- **移动设备开发**：在设计移动页面时，使用vw和vh设置字体大小可能会导致横屏和竖屏显示差异。此时，vmin和vmax可以帮助解决这个问题，确保字体大小在不同屏幕方向下保持一致。例如，将字体大小设置为vmin，可以...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
同时，为了实现更好的响应式设计，可以结合使用calc()函数和视窗单位，如calc(100vh - 2 * header_height)，来动态计算元素的大小。 总之，理解并熟练运用这些CSS单位，可以帮助开发者创建更具灵活性和适应性的网页...
解决vue使用hight:100%没用，并不能全屏的问题
CHENC0518的博客
03-30 1904
1.在使用vue进行样式编写时，发现使用hight:100%，高度还是为0。 2.于是再全局样式global.css中设置100%，所有页面的样式又乱了。 3.只需将hight:100%改为hight:100vh。vh就是当前屏幕可见高度的1%。 hight:100vh； ...
css使用svg,单位使用vw,vh出现的问题
m0_47531829的博客
02-22 1292
项目做完了之后，遇到一个css上面的问题，因为项目做的是一个手机端的页面，采用的单位是vm,vh,项目上线后没有什么问题，但经过同事的测试，居然出现了样式上面的问题，特此记录一下遇到的问题。 在手机屏幕为375，667的情况下，这是没有任何问题的，但是在ipad下(手机宽度比较宽)，就会出现这样的问题， 一开始，是因为这个图标用的是背景图片，没有设置no-repeat属性，后来设置了no-repeat属性，又出现了另一个问题， c ...
html未能填充满整个页面,为什么100vh不能填满整个页面？
weixin_32880357的博客
06-03 2138
我目前正在使用React，并且遇到问题，要求div等于页面高度的100％。最初，我有一个问题，总是有大约24px的身体上方的空白空间。无论如何，我都无法适应它。我最终用这个对我app.css(复位)为什么100vh不能填满整个页面？* {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baselin...
iOS Safari 浏览器 100vh 带有滚动条解决方案
卡尔特斯
09-10 3981
问题场景 在移动端 safari 或者 chrome 浏览器中，使用 100vh，会出现滚动条。 根本原因 在 safari 和 chrome 浏览器中，100vh 是指去掉地址栏的高度，所以会出现滚动条。 解决方案 移动端一般不考虑 chrome 浏览器，用户基数小，如果只考虑微信公众号开发也不用考虑这个问题。如果需要考虑 safari 浏览器的用户体验，建议使用 100% 替代 100vh，或者使用 js，而不是 100vh。 ...
解决CSS 100vw布局出现滚动条问题
qq_36560875的博客
08-23 5279
前些天做了一个移动端活动页面，采用了100vw来充满屏幕。后来发现竟然可以左右滑动，还出现了滚动条。 上网收了一下 解决了：记录一下，以后懒得再找。有幸看到的童鞋可以按如下css代码解决。 html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow:
基于vue解决 100vw 和 100vh出现滚动条的问题
zjslan_js的博客
07-15 5513
基于vue解决 100vw 和 100vh出现滚动条的问题
css中的vw/vh与%
JYB2106056288的博客
11-02 1171
首先来说说vw/vh,将浏览器的宽高等分为100，浏览器视口的宽高单位。也就是说能智能的计算，包括外接显示器。可以实现元素的自适应宽高：随着浏览器视口变化而变化。的宽高作为100%。例如width:50%;height:50%;就是将父级元素宽度的50%设置为自己的宽度，将父级元素高度的50%设置为自己的高度。最后，希望自己的总结能让各位看官少走弯路吧！vw：若盒子的宽度设置为100vw,也就是浏览器视口宽度。其他博主讲这个的多，但是我觉得没有。
CSS3使用vw实现自适应
qq_37245888的博客
05-29 1966
CSS3使用vw实现自适应 方式1 1.对于设计稿的尺寸转换为vw单位，我们使用Sass函数编译 //iPhone 6尺寸作为设计稿基准 vmbase:375;@functionvw(vm_base: 375; @function vw(vmb​ase:375;@functionvw(px) { @return ($px / $vm_base) * 100vw; } 2.无论是文本还是布局高宽、...
移动Web适配策略：rem与vw/vh解析
"移动Web移动端适配主要涉及CSS中的长度单位rem和vw/vh的使用，以及媒体查询在实现响应式设计中的应用。rem作为相对单位，常用于移动适配，而vw/vh是与视口宽度和高度相关的单位，被视为未来的解决方案。通过媒体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值