美文网首页
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