为何引用同一CSS自定义变量的div宽高在浏览器中实测值不同

问题原因 #

CSS 自定义属性（CSS 变量）为惰性求值，且 calc() 表达式中的百分比值的参考基准会跟随所属属性的类型动态变化，同一个表达式用在不同属性上会得到完全不同的计算结果：

• 当--scrollbar-width变量作用在width属性上时，calc(100vw - 100%)中的100%会按照宽度属性的规则，参照div的包含块（这里为body元素）的宽度计算，最终结果为「视口宽度 - 包含块宽度」，也就是页面垂直滚动条的宽度。
• 当同一个变量作用在height属性上时，表达式内的100%会按照高度属性的规则，参照div的包含块的高度计算，最终结果变为「视口宽度 - 包含块高度」，和width属性的计算结果完全不同，因此实际测得的宽高数值存在差异。

如果要让div宽高一致且等于滚动条宽度，可以在定义变量时将百分比的参考基准固定，比如将100%替换为兼容的固定参照单位，或者通过JS获取滚动条宽度后定义为固定像素值的CSS变量。

内容的提问来源于stack exchange，提问作者hansf14