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

css exclude scrollbar from width
scrollbar width
100vw scrollbar
css set width without scrollbar
width minus scrollbar
css overflow
increase scrollbar width on hover
width vw 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?


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

100vw and scrollbars - HTML & CSS, 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,  The vw unit represents a percentage of the root element width. One vw is equal to 1% of the viewport width. We have an element with the following CSS: .element { width: 50vw; } When the width of the viewport is 500px, the 50vw will be calculated as below: width = 500*50% = 250px.


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.

The trick to viewport units on mobile, On pages that don't have a vertical scrollbar, no horizontal scrollbar is created: get to 100vw, you have to shoot for ~98 to be safe and even then it's not perfect I was just wondering why vw includes the scrollbar width, it limits its perfect sizes everywehre due to it basing it off the viewport width/height. Viewport Width (vw) – A percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide. The difference between % and vw is most similar to the difference between em and rem .


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.

100vw with ScrollBars, Case in point: should the scrollbar be taken into account for the vw unit? So yeah, no clear guidance there when it comes to handling device and browser-​specific vh was initially calculated by the current viewport of your browser. Can you check this live demo on your mobile and let me know what you see? Here is a  CSS vw is pretty useless. The problem with vw is that, when you use vw for width, it gives you the width of the viewport which includes the scrollbar width as well. Whereas the scrollbars are not a part of the website width and are always variable across different devices.


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.

🧝 Is it possible to calculate viewport width (vw) without scrollbar , <p><b>Replicate:</b> scroll down and disable the scrollbar patch. provides a solution to the problem where 100vw is greater than the width of the viewport. As I mentioned, the vw unit determines its size based on the width of the viewport. However, browsers calculate the viewport size as the browser window, which includes the space for the scrollbar. If the page extends more than the height of the viewport - which will make the scrollbar appear - the width of the viewport will actually be larger than the width of the html element.


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

Ignoring scrollbar width in CSS vw?, One way to do this is with calc. As far as I know, 100% is the width, including the scroll bars. So if you do this: body { width: calc(100vw - (100vw - 100%)); }. If you need an element to be 100% width of the visible viewport(viewport minus scrollbar) you will need to set it to 100% of the body. You can't do it with vw units if there is a vertical scrollbar.


A Look at CSS Viewport Units ← Alligator.io, I use 100vw on a container with no overflow, and then overflow an element inside of the container. I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that..panel { height: 100vh; } This is working fine, until I get a scrollbar. The problem is, that vh ignores the height used by the scrollbar and therefore adds a vertical scrollbar.


CSS gotcha: How to fill page with a div?, Let's explore the vh, vw, vmin and vmax units and look at how it can make our designs easier to accomplish. vh stands for viewport height and vw is for viewport width. of 100vw being slightly wider than the viewport minus the scrollbar width. Answers to this Stack Overflow question give out a few possible solutions. Now, however, you set width:100vw and that is going to be (in this case) 100% wide (viewport wide) + the vertical scrollbar width. That's too wide. That induces the HORIZONTAL scrollbar.


[css-values] Should viewport units still depend on scrollbar width for , newer solution: viewport units vh and vw. Viewport-percentage lengths aka Viewport units have been around for a while now, and is perfect for  In the example above img will have 100% of the parent width, which is 800px while any element with class alignfull will have the 100% of a viewport. This is a simple solution for making full width section inside a narrower container: the element is positioned relatively which allows us to move it to the center of parent div by setting left: 50% and then move it back to the edge of the screen