If you want to fit your content that's an entirely different question. If you don't want a scrollbar use overflow: hidden; or, set max-width: 100%; on whatever your containing element is so it can never extend past the available space.
Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.
To get the width of the scrollbar, you use the offsetWidth and clientWidth of the Element : The offsetWidth returns the width of the Element in pixels including the scrollbar. The clientWidth returns the with of the Element in pixels without the scrollbar.
.prop("clientWidth")
and .prop("scrollWidth")
var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width
in JavaScript:
var actualInnerWidth = document.body.clientWidth; // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth; // El. width minus scrollbar width
P.S: Note that to use scrollWidth
reliably your element should not overflow horizontally
jsBin demo
You could also use .innerWidth()
but this will work only on the body
element
var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
You can use vanilla javascript by simply writing:
var width = el.clientWidth;
You could also use this to get the width of the document as follows:
var docWidth = document.documentElement.clientWidth || document.body.clientWidth;
Source: MDN
You can also get the width of the full window, including the scrollbar, as follows:
var fullWidth = window.innerWidth;
However this is not supported by all browsers, so as a fallback, you may want to use docWidth
as above, and add on the scrollbar width.
Source: MDN
Here are some examples which assume $element
is a jQuery
element:
// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case
// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth
// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar
Try this :
$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar
You can get the screen width by with and without scroll bar by using this code.
Here, I have changed the overflow value of body
and get the width with and without scrollbar.
The safest place to get the correct width and height without the scrollbars is from the HTML element. Try this:
var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight
Browser support is pretty decent, with IE 9 and up supporting this. For OLD IE, use one of the many fallbacks mentioned here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With