Is it possible to calculate the Viewport Width (vw) without scrollbar?

问题

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

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

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?

回答1:

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%));
}

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

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))
}

回答2:

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.

回答3:

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.

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;
}

回答4:

I do this by adding a line of javascript to define a CSS variable once the document has loaded:

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 innerWidth with innerHeight and clientWidth with clientHeight.

回答5:

The vw unit doesn't take the overflow-y scrollbar into account when overflow-y is set to auto.

Change it to overflow-y: scroll; and the vw unit will be the viewport without the scrollbar.

Only downside to take into account. If the content fits into the screen, the scrollbar is shown anyway. Possible solution is to change from auto to scroll in javascript.

回答6:

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.

<!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>

回答7:

The easiest way is set the html & body to 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.

回答8:

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{
 --scrollbar-width: calc(100vw - 100%);
}


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

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

来源：https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar

标签

css

viewport-units