是否可以在不使用滚动条的情况下计算视口宽度(vw)? [英] Is it possible to calculate the Viewport Width (vw) without scrollbar?

问题描述

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

As mentioned in the title, is it possible to calculate the vw without the scrollbars in css only?

例如，我的屏幕的宽度为1920px. vw返回1920px，太好了.但是我的实际身高只有1903px.

For example, my screen has a width of 1920px. vw returns 1920px, great. But my actual body width is only something like 1903px.

我是否有办法仅使用css检索1903px值(不仅用于body的直接子级)，还是为此我绝对需要JavaScript?

Is there a way for me to retrieve the 1903px value with css only (not only for direct children of the body), or do I absolutely need JavaScript for this?

推荐答案

一种方法是使用calc.据我所知，100％是包括滚动条的宽度.因此，如果您这样做:

One way to do this is with calc. As far as i know, 100% is the width including scrollbars. So if you do:

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

您将获得100vw减去滚动条的宽度.

You get the 100vw minus the width of the scrollbar.

例如，如果您想要的正方形是视口的50％(减去scollbar宽度的50％)，则也可以使用高度来实现

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)

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

这篇关于是否可以在不使用滚动条的情况下计算视口宽度(vw)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！