How to Calculate Viewport Width (vw) Excluding Scrollbar in CSS?

Calculating Viewport Width (vw) Excluding Scrollbar in CSS Only

The question arises: can CSS alone determine the vw excluding scrollbars? Consider a screen with a 1920px width, where vw returns 1920px. However, the actual body width is approximately 1903px.

To address this discrepancy, utilize the CSS calc() function. By calculating 100vw minus (100vw - 100%), the resulting value represents the vw excluding the scrollbar width.

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>

Additionally, this technique can be applied to height calculations. For instance, to create a square that occupies 50% of the viewport width minus 50% of the scrollbar width:

<code class="css">.box {
  width: calc(50vw - ((100vw - 100%)/2));
  height: 0;
  padding-bottom: calc(50vw - ((100vw - 100%)/2));
}</code>

The above is the detailed content of How to Calculate Viewport Width (vw) Excluding Scrollbar in CSS?. For more information, please follow other related articles on the PHP Chinese website!