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