基于vue解决 100vw 和 100vh出现滚动条的问题

最新推荐文章于 2025-04-11 15:37:13 发布

zjslan_js

最新推荐文章于 2025-04-11 15:37:13 发布

阅读量5.9k

点赞数 11

文章标签：前端 vue.js css

本文链接：https://blog.youkuaiyun.com/zjslan_js/article/details/125813119

版权

博客详细解释了在使用width:100vw和height:100vh时出现滚动条的原因，指出这是因为vw、vh包含滚动条宽度。解决方案是通过设置全局样式，确保html、body和主要容器无边距和填充，以避免滚动条的出现。此问题在移动端开发中通常不会发生。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

width：100vw和height:100vh出现滚动条的原因在于

% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
window.innerWidth = 视口宽度 = 100vw // 打印1280
this.$refs.main.clientWidth = 父视图宽度(body宽度) = 100% // 打印1263
所以视口宽度其实是包含了滚动条的宽度

解决办法：

html,body,#app{

margin: 0;

padding: 0;

height: 100%;

}

设置全局样式表并在main.js中引入

import "./assets/css/common.css";

注意：vue开发移动端不会出现此问题