CSS 是否可以在没有滚动条的情况下计算视口宽度 (vw)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33606565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to calculate the Viewport Width (vw) without scrollbar?
提问by Marten Zander
As mentioned in the title, is it possible to calculate the vwwithout the scrollbars in css only?
如标题中所述，是否可以vw仅在 css 中计算没有滚动条？
For example, my screen has a width of 1920px. vwreturns 1920px, great. But my actual body width is only something like 1903px.
例如，我的屏幕宽度为1920px. vw回来了1920px，太好了。但我的实际身体宽度只是像1903px.
Is there a way for me to retrieve the 1903pxvalue with css only (not only for direct children of the body), or do I absolutely need JavaScript for this?
有没有办法让我1903px只用 css检索值（不仅适用于 的直接子代body），还是我绝对需要 JavaScript 来实现这一点？
回答by Mattias Ottosson
One way to do this is with calc. As far as i know, 100% is the width including scrollbars. So if you do:
一种方法是使用 calc。据我所知，100% 是包括滚动条在内的宽度。所以如果你这样做：
body {
width: calc(100vw - (100vw - 100%));
}
You get the 100vw minus the width of the scrollbar.
你得到 100vw 减去滚动条的宽度。
You can do this with height as well, if you want a square that's 50% of the viewport for example (minus 50% of the scollbar width)
例如，如果您想要一个占视口 50% 的正方形（减去 scollbar 宽度的 50%），您也可以使用高度执行此操作
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
回答by user11990065
I do this by adding a line of javascript to define a CSS variable once the document has loaded:
我通过在文档加载后添加一行 javascript 来定义 CSS 变量来做到这一点：
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
then in the CSS you can use var(--scrollbar-width)to make any adjustments you need for different browsers with/without scrollbars of different widths. You can do something similar for the horizontal scrollbar, if needed, replacing the innerWidthwith innerHeightand clientWidthwith clientHeight.
然后在 CSS 中，您可以使用var(--scrollbar-width)/不使用不同宽度的滚动条对不同的浏览器进行所需的任何调整。如果需要，您可以对水平滚动条执行类似的操作，将innerWidthwithinnerHeight和clientWidthwith替换clientHeight。
回答by Madara's Ghost
According to the specs, the viewport relative length units do not take scrollbars into account (and in fact, assume that they don't exist).
根据规范，视口相对长度单位不考虑滚动条（事实上，假设它们不存在）。
So whatever your intended behavior is, you cannot take scrollbars into account when using these units.
因此，无论您的预期行为是什么，在使用这些单位时都不能考虑滚动条。
回答by holden
Webkit browsers exclude the scrollbars, other include them in the returned width. This may of course lead to problems: for instance if you have dynamically generated content with ajax that add height dynamically, Safari might switch from a layout to another during page visualization... Ok, it doesn't happen often, but it's something to be aware about. On mobile, less problems, cause scrollbars are generally not showed.
Webkit 浏览器不包括滚动条，其他浏览器将它们包含在返回的宽度中。这当然可能会导致问题：例如，如果您使用 ajax 动态生成了动态添加高度的内容，则 Safari 可能会在页面可视化期间从一个布局切换到另一个布局......好吧，这并不经常发生，但它是一些了解。在手机上，问题较少，导致滚动条一般不显示。
That's said, if your problem is calculate exactly the viewport width without scrollbars in all browser, as far as i know, a good method is this:
也就是说，如果您的问题是在所有浏览器中准确计算没有滚动条的视口宽度，据我所知，一个好的方法是：
width = $('body').innerWidth();
having previously set:
之前设置过：
body {
margin:0;
}
回答by Ilario Engler
The vwunit doesn't take the overflow-yscrollbar into account when overflow-yis set to auto.
设置为时，vw单位不考虑overflow-y滚动条。overflow-yauto
Change it to overflow-y: scroll;and the vwunit will be the viewport without the scrollbar.
将其更改为overflow-y: scroll;，vw单位将是没有滚动条的视口。
Only downside to take into account. If the content fits into the screen, the scrollbar is shown anyway. Possible solution is to change from autoto scrollin javascript.
唯一需要考虑的缺点。如果内容适合屏幕，无论如何都会显示滚动条。可能的解决方案是在 javascript 中更改auto为scroll。
回答by SequenceDigitale.com
The only way I found it to work without messing your code with "calc" is to make the container element size to 100vw; Adding a wrapper around the container for overflow-x; This will make the container to be fullwidth like if the scrollbar was over the content.
我发现它可以在不使用“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>回答by Omar Errabaany
in my case i have a to set a div 100wh - 230px and i was facing the same problem with that extra scroll width what i did is :
在我的情况下，我有一个 div 100wh - 230px 并且我面临与额外滚动宽度相同的问题，我所做的是：
width: calc(100vw - (100vw - 100%) - 230px);
回答by gonnavis
The easiest way is set the html & body to 100vw:
最简单的方法是将 html & body 设置为 100vw：
html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }
The only problem is the right-most will be cut a little if scrollbar is shown.
唯一的问题是如果显示滚动条，最右边的会被切掉一点。
回答by Denis Savenko
It's not my solution, but helps me create dropdown fullwidth menu with absolute in relative element in not fullwith span.
这不是我的解决方案，但可以帮助我创建下拉全宽菜单，在相对元素中使用绝对而不是全宽。
We should get scroll with in css var in :root and then use it.
我们应该在 :root 中的 css var 中滚动，然后使用它。
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }
