美文网首页
vw和100%的区别导致的计算宽度问题

vw和100%的区别导致的计算宽度问题

作者: 小小鱼yyds | 来源:发表于2020-12-31 11:19 被阅读0次

从网上差到vw与100%的区别如下:
% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
我在计算一个组件宽度的时候,本来用100vw减去左侧抽屉栏的宽度就是右侧组件的宽度,但是最后得到的宽度溢了出来,使得抽屉+组件的宽度大于了body的宽度。
在打印之后发现:
window.innerWidth = 视口宽度 = 100vw // 打印1280
this.$refs.main.clientWidth = 父视图宽度(body宽度) = 100% // 打印1263
所以视口宽度其实是包含了右侧滚动条的宽度,如果用视口宽度 -
body的宽度,17就是滚动条的宽度

相关文章

网友评论

      本文标题:vw和100%的区别导致的计算宽度问题

      本文链接:https://www.haomeiwen.com/subject/otuloktx.html