如标题中所述，是否可以vw仅在 css 中计算没有滚动条的？
例如，我的屏幕宽度为1920px. vw回报1920px，太好了。但我的实际体宽只有1903px.
有没有办法让我1903px只用 css 检索值（不仅适用于 的直接子级body），还是我绝对需要 JavaScript？
问问题
76323 次
14 回答
158
一种方法是使用 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))
}
于 2016-01-19T19:02:40.990 回答
34
我通过在文档加载后添加一行 javascript 来定义 CSS 变量来做到这一点：
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
然后在 CSS 中，您可以使用var(--scrollbar-width)不同宽度的滚动条对不同浏览器进行所需的任何调整。如果需要，您可以对水平滚动条执行类似的操作，将innerWidthwithinnerHeight和clientWidthwith替换掉clientHeight。
于 2019-09-01T19:08:23.000 回答
10
根据规范，视口相对长度单位不考虑滚动条（事实上，假设它们不存在）。
因此，无论您的预期行为是什么，在使用这些单位时都不能考虑滚动条。
于 2015-11-09T10:06:23.097 回答
5
复制和粘贴解决方案
这是一个基于 user11990065 的回答的简单插入式解决方案，用于设置 css 变量--scrollbar-width并在调整大小时保持更新。它还会根据 DOMContentLoaded 和加载事件进行计算，因此您不必担心初始渲染阶段的大小变化。
您可以将其复制并粘贴到您的代码中，因为它是 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);
如果您的页面中有可能显示/隐藏滚动条的动态高度变化，您可能需要查看检测文档高度变化，您可以使用它触发高度变化的重新计算。
由于该值是使用 JS 计算并设置为固定值，因此您可以在 CSS 的计算操作中使用它，如下所示：
.full-width {
width: calc(100vw - var(--scrollbar-width));
}
这将为.full-width提供完全可用的宽度。
于 2021-03-20T20:36:20.963 回答
3
Webkit 浏览器不包括滚动条，其他浏览器将它们包含在返回的宽度中。这当然可能会导致问题：例如，如果您使用 ajax 动态生成内容并动态添加高度，Safari 可能会在页面可视化期间从一个布局切换到另一个布局......好吧，这并不经常发生，但它是请注意。在移动设备上，问题较少，导致滚动条通常不显示。
也就是说，如果您的问题是在所有浏览器中准确计算没有滚动条的视口宽度，据我所知，一个好方法是：
width = $('body').innerWidth();
之前设置过：
body {
margin:0;
}
于 2015-11-09T11:28:14.223 回答
2
body { overflow: overlay; }
如果您不想使事情过于复杂，在某些情况下这可能就足够了。至少它很好地解决了我的问题，因为内容和视口边缘之间有足够的空白（Windows 滚动条会与你最右边的 20 个像素重叠）。
于 2021-05-31T19:37:52.097 回答
0
It's possible just very "ugly" looking.
First you need to have this script running to get the scrollbar width into a css variable:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
Now for example if you want "real" 80vw do this:
calc(0.8 * (100vw - var(--scrollbar-width)));
"real" 40vw
calc(0.4 * (100vw - var(--scrollbar-width)));
于 2021-08-04T14:21:16.420 回答
0
100vw = 有滚动条的屏幕宽度 100% = 没有滚动条的屏幕宽度
在测量屏幕宽度时，总是最好使用 calc(100% - 50px)。即使在滚动条直接可见的 Windows 浏览器上，与 macOS 浏览器相比，返回的屏幕宽度也不同。
于 2020-12-09T15:00:31.540 回答
-1
当设置为时，vw单位不考虑overflow-y滚动条。overflow-yauto
将其更改为overflow-y: scroll;，vw单位将是带有滚动条的视口。然后，您可以使用 calc() 从 vw 值中减去滚动条大小。您还可以定义滚动条宽度，使其独立于浏览器。
只有缺点要考虑。如果内容适合屏幕，则无论如何都会显示滚动条。可能的解决方案是在javascript中从更改auto为。scroll
于 2018-02-07T10:26:04.453 回答
-1
我发现它在不使用“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>于 2019-03-21T15:30:05.167 回答
-1
如果情况类似于滑块：正如许多答案中发布的那样，宽度 100% 不考虑滚动条，而 100vw 则考虑。如果有许多元素需要占用窗口的宽度并且嵌套在已经具有 100% 窗口宽度的容器内（或者其自然块宽度是这样的），您可以使用：
- 显示容器的 flex
- Flex：子元素为 0 0 100%
于 2020-08-05T21:17:08.810 回答
-1
不，没有vwCSS 中的滚动条就无法计算。
但是，有一种方法可以解决这个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>
正如您在上面的示例中看到的那样，row--full-width元素从容器中流出，即使有滚动条，它也会与标题对齐。
在 Edge 18 (Win)、Edge 88 (Win/Mac) 和 Chrome 88 (Win/Mac) 上测试。
于 2021-03-13T15:46:57.057 回答
-3
最简单的方法是将 html & body 设置为 100vw：
html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }
唯一的问题是如果显示滚动条，最右边的会被剪掉一点。
于 2019-06-13T06:34:49.983 回答
-4
这不是我的解决方案，但可以帮助我创建下拉全角菜单，其中相对元素中的绝对值不是完整的跨度。
我们应该在 :root 中使用 in css var 滚动，然后使用它。
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }
于 2019-05-22T07:55:15.773 回答