Question

如标题中所述，是否可以仅在css中计算没有滚动条的vw？

例如，我的屏幕宽度为1920px。 vw返回1920px，太棒了。但我的实际身体宽度只有1903px。

我是否有办法仅使用css检索1903px值（不仅适用于body的直接子项），还是我绝对需要JavaScript？

Answer 1

这样做的一种方法是使用calc。据我所知，100％是包括滚动条的宽度。所以如果你这样做：

body {
  width: calc(100vw - (100vw - 100%));
}

你得到100vw减去滚动条的宽度。

如果你想要一个50％视口的正方形（减去50％的scollbar宽度），你也可以用高度来做这个

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

Answer 2

根据 the specs ，视口相对长度单位不考虑滚动条（事实上，假设它们不存在）。

因此，无论您的预期行为是什么，在使用这些单位时都不能考虑滚动条。

Answer 3

我这样做是通过在文档加载后添加一行javascript来定义CSS变量：

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

然后在CSS中，您可以使用var(--scrollbar-width)对具有/不具有不同宽度滚动条的不同浏览器进行所需的任何调整。如果需要，您可以对水平滚动条执行类似的操作，将innerWidth替换为innerHeight，将clientWidth替换为clientHeight。

Answer 4

Webkit浏览器排除滚动条，其他包括返回的宽度。这当然可能会导致问题：例如，如果您动态生成带有动态添加高度的ajax的内容，Safari可能会在页面可视化期间从布局切换到另一个布局... 好吧，它并不经常发生，但需要注意一些事情。在移动设备上，问题较少，导致滚动条通常不显示。

那说，如果你的问题在所有浏览器中都没有滚动条确切计算出视口宽度，据我所知，一个好的方法就是这样：

width = $('body').innerWidth();

之前已经设定：

body {
    margin:0;
}

Answer 5

当vw设置为overflow-y时，overflow-y单元不会考虑auto滚动条。

将其更改为overflow-y: scroll;，vw单位将成为没有滚动条的视口。

唯一的缺点是要考虑到。如果内容适合屏幕，则无论如何都会显示滚动条。可能的解决方案是在javascript中从auto更改为scroll。

Answer 6

复制和粘贴解决方案

这是一个简单的插入式解决方案，它基于 user11990065 的 answer 来设置 css 变量 --scrollbar-width 并在调整大小时保持更新。它还根据 DOMContentLoaded 和 load 事件进行计算，因此您不必担心初始渲染阶段的大小变化。

您可以将它复制并粘贴到您的代码中，因为它是 vanilla JS（或将其包装在“脚本”标签中并直接粘贴到您的 HTML 代码中：

function _calculateScrollbarWidth() {
  document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
}
// recalculate on resize
window.addEventListener('resize', _calculateScrollbarWidth, false);
// recalculate on dom load
document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false); 
// recalculate on load (assets loaded as well)
window.addEventListener('load', _calculateScrollbarWidth);

如果您的页面中有可能显示/隐藏滚动条的动态高度变化，您可能需要查看 Detect Document Height Change，您也可以使用它在高度变化时触发重新计算。

由于该值是使用 JS 计算并设置为固定值，因此您可以在 CSS 中的计算操作中使用它，如下所示：

.full-width {
  width: calc(100vw - var(--scrollbar-width));
}

这将给 .full-width 准确的可用宽度。

Answer 7

我发现它可以正常工作而又不会用“ calc”弄乱代码的唯一方法是使容器元件尺寸为100vw；在容器周围添加一个包装，以防止溢出-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>

Answer 8

现在这是我的解决方案，但可以帮助我创建下拉式全角菜单，其中相对元素的绝对值不等于跨度。

我们应该在：root的css var中滚动并使用它。

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee

Answer 9

最简单的方法是将html＆body设置为100vw：

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

唯一的问题是，如果显示滚动条，则最右边的部分会被剪掉。

Answer 10

如果大小写类似于滑块：如许多答案中所述，宽度100％不考虑滚动条，而100vw则考虑。如果有许多元素需要占用窗口的宽度，并且已经嵌套在已经具有100％窗口宽度（或者其自然块宽度就是这样）的容器内，则可以使用：

显示容器的弹性
Flex：0 0 100％用于子元素

Answer 11

100vw =带有滚动条的屏幕宽度 100％=没有滚动条的屏幕宽度

始终最好在计算屏幕宽度时使用calc（100％-50px）。即使在直接可见滚动条的Windows浏览器上，与macOS浏览器相比，返回的屏幕宽度也有所不同。

Answer 12

不，没有 CSS 中的滚动条，就无法计算 vw。

但是，有一种方法可以解决 100vw ruined by the scrollbar on Windows 问题。您必须创建一个全角元素，在本例中为 row--full-width，它从 Flex 容器中突出。此解决方案适用于 Mac 和 Windows：

HTML：

<section> 
  <div class="container">
    <div class="row--full-width"></div>
    <div class="row">
      <div class="card">
      </div>
      <div class="card">
      </div>
    </div>
  </div>
</section>

示例：https://jsfiddle.net/ecmv6ho1/show
代码：https://jsfiddle.net/ecmv6ho1/

如您在上面的示例中所见，row--full-width 元素从容器中流出，即使有滚动条，它也会与标题对齐。

在 Edge 18 (Win)、Edge 88 (Win/Mac) 和 Chrome 88 (Win/Mac) 上测试。

Answer 13

body { overflow: overlay; }

如果您不想让事情过于复杂，这在某些情况下可能就足够了。至少它很好地解决了我的问题，因为在内容和视口边缘之间有足够的空白（Windows 滚动条会与你最右边的 20 像素重叠）。

Answer 14

使用 width: 100% 而不是 width: 100vw。

Answer 15

可能只是看起来非常“丑陋”。

首先，您需要运行此脚本以将滚动条宽度设置为 css 变量：

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

现在，例如，如果您想要“真正的”80vw，请执行以下操作：

calc(0.8 * (100vw - var(--scrollbar-width)));

“真实”40vw

calc(0.4 * (100vw - var(--scrollbar-width)));

Answer 16

在我的情况下，我必须将div设置为100wh-230px，而我在使用额外的滚动宽度时遇到了同样的问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>

是否可以在没有滚动条的情况下计算视口宽度（vw）？

16 个答案: