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

by

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

More Related Contents:

  1. CSS Units – What is the difference between vh/vw and %?
  2. CSS: Are view height (vh) and view width (vw) units widely supported?
  3. Is there a CSS selector for elements containing certain text?
  4. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  5. Nesting CSS classes
  6. Control the dashed border stroke length and distance between strokes
  7. Is embedding background image data into CSS as Base64 good or bad practice?
  8. Centering a background image, using CSS
  9. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  10. Difference between static and relative positioning
  11. How can one import only variables and mixins from Sass stylesheets?
  12. How to override the properties of a CSS class using another CSS class
  13. blur of part of Background image with css
  14. How to align a div to the top of its parent but keeping its inline-block behaviour?
  15. How can I change the color of an ‘svg’ element?
  16. Styling elements with a dot (.) in the class name
  17. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  18. Css Content, Attr and Url in the same sentence
  19. CSS Transform with element resizing
  20. Fill only Half a star with SVG
  21. Correct terms and words for sections and parts of selectors
  22. Extracting only the css used in a specific page
  23. TCPDF not render all CSS properties
  24. Is a button allowed to have display:grid? [duplicate]
  25. How to fix Internet explorer 7 bug when using percentage widths for layout?
  26. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  27. Media queries and background images
  28. Implement a CSS-only slideshow / carousel with next and previous buttons?
  29. Capitalize first letter of sentences CSS
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment