如标题中所述，是否可以仅在css中计算没有滚动条的vw？
例如，我的屏幕宽度为1920px。 vw回归1920px，太棒了。但我的实际身体宽度只是像1903px。
有没有办法让我只用css检索1903px值（不仅适用于body的直接孩子），还是我绝对需要JavaScript呢？
一种方法是使用calc。据我所知，100％是包括滚动条的宽度。所以，如果你这样做：
body {
width: calc(100vw - (100vw - 100%));
}
你得到100vw减去滚动条的宽度。
如果你想要一个占视口50％的正方形（减去scollbar宽度的50％），你也可以用高度来做这个。
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
根据the specs，视口相对长度单位不考虑滚动条（事实上，假设它们不存在）。
因此，无论您的预期行为是什么，使用这些单位时都不能考虑滚动条。
当vw设置为overflow-y时，overflow-y单位不考虑auto滚动条。
将其更改为overflow-y: scroll;，vw单位将是没有滚动条的视口。
唯一的缺点是要考虑到。如果内容适合屏幕，则无论如何都会显示滚动条。可能的解决方案是在javascript中从auto更改为scroll。
Webkit浏览器排除滚动条，其他包括返回的宽度。这当然可能导致问题：例如，如果你动态生成带有动态增加高度的ajax的内容，Safari可能会在页面可视化过程中从布局切换到另一个...好吧，它不会经常发生，但它是要注意。在移动设备上，问题较少，导致滚动条通常不显示。
这就是说，如果你的问题在所有浏览器中都没有滚动条准确计算视口宽度，据我所知，一个好的方法是：
width = $('body').innerWidth();
以前设定：
body {
margin:0;
}
我发现它工作的唯一方法是使用“calc”来破坏你的代码是为了使容器元素大小达到100vw;在容器周围添加一个包装器，用于overflow-x;如果滚动条位于内容之上，这将使容器变为全宽。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>