By frequent


2011-12-01 09:56:14 8 Comments

I have an element and need it's width without(!) vertical scrollbar.

Firebug tells me body width is 1280px.

Either of these work fine in Firefox:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

They all return 1263px, which is the value I'm looking for.

However all other browser give me 1280px.

Is there a cross browser way to get a fullscreen width without(!) vertical scrollbar?

8 comments

@mrbengi 2014-06-10 09:50:52

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.

@valerio0999 2016-12-01 17:18:04

i had to rely on this too. the answers above didn't work for me

@Benn 2016-12-27 11:35:14

Here is what I use

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});

@Roko C. Buljan 2011-12-01 10:54:52

.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 

@Konstantin Pereiaslov 2013-08-21 04:41:25

This won't work if for some reason you changed the width of body element.

@Konstantin Pereiaslov 2013-08-23 14:25:01

@RokoC.Buljan I changed it in CSS as a part of the design, so I don't think that would be easy. Just letting everyone else, who may get the wrong results because of it know.

@Sammaye 2014-05-30 08:27:19

It seems this doesn't truly work on Chrome any more, the reported width is actually 20px bigger than the window itself, I have tried numerous width measurements so far nothing.

@Roko C. Buljan 2014-05-30 09:37:03

@Sammaye Sorry to hear that, works in Chrome for me.

@Sammaye 2014-05-30 09:45:13

I thought it may have been version of chrome but I just updated and it still happens. The way I am testing is I have a media query at 768 and a innerWidth measurement at 768, the JS breaks at about 786 according to Chromes little size hover over on its pages. It might be implementation differences between JS width and media query width

@Roko C. Buljan 2014-05-30 11:07:35

@Sammaye ... It's hard to visualize without a demo... Can you setup a simple test case on jsBin?

@Sammaye 2014-05-30 11:23:25

Had it wrong way round, JS is smaller than media query when reporting but here is an example: jsbin.com/homixuqi/1 , if you resize it to 780 it will show 764 in JS

@Roko C. Buljan 2014-05-30 12:50:58

@Sammaye that's cause you forgot (why?) to set margin:0; to BODY or use a common CSS reset code. jsbin.com/homixuqi/2/edit . So again, the code works perfectly fine.

@Sammaye 2014-05-30 13:08:46

Ok fair enough, I thought bootstrap 3.1 had reset code but it appears not

@The Merovingian 2014-09-22 05:33:39

note that this method includes the vertical scrollbar width in the calculated width, if there is one (tested in Chrome).

@Naman Goel 2015-04-14 14:42:47

This kind of works, but not for height if you needed that. Also, this is not super reliable as the size of the body can be messed with using CSS.

@Roko C. Buljan 2015-04-14 15:19:14

@NamanGoel it's your job as web designer to prevent messarounds with the body width. It's not a difficult task. Also, regarding the height it kind of depends if your body overflows or not. if it overflows than constrain it.

@Naman Goel 2015-04-14 15:54:43

@RokoC.Buljan I'm not disagreeing with you here. Of course no good web designer/developer to should mess with the body width and stuff. My point was about using the most reliable API available. Some javascript developers may be building plug-ins etc and may not have control of the entire page.

@Roko C. Buljan 2018-05-03 17:35:56

@Fabián the jsBin demo works pretty good (Windows Ch. 66.0.3359)

@homebrand 2016-03-26 06:12:45

None of these solutions worked for me, however I was able to fix it by taking the width and subtracting the width of the scroll bar. I'm not sure how cross-browser compatible this is.

@www139 2015-07-05 15:39:26

I experienced a similar problem and doing width:100%; solved it for me. I came to this solution after trying an answer in this question and realizing that the very nature of an <iframe> will make these javascript measurement tools inaccurate without using some complex function. Doing 100% is a simple way to take care of it in an iframe. I don't know about your issue since I'm not sure of what HTML elements you are manipulating.

@Naman Goel 2015-04-14 14:41:52

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.

@Joshua Bambrick 2014-08-14 00:46:21

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

@Jan 2014-08-22 09:28:16

This does not take into account if there is a scrollbar

@user4642212 2015-08-11 21:24:55

document.documentElement.clientWidth helped me the most, because it works for height as well (innerHeight can be smaller if the body doesn’t fill the page, etc.) and gets the value without the scrollbar.

@Codemonkey 2018-06-22 08:48:03

document.documentElement.clientWidth is the real winner. document.body.clientWidth is ok unless you have a min-width set on your body element and the browser is currently smaller than that minimum width.

@Konstantin Dinev 2013-02-27 12:58:06

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

Related Questions

Sponsored Content

19 Answered Questions

[SOLVED] How to set up fixed width for <td>?

18 Answered Questions

[SOLVED] Get the size of the screen, current web page and browser window

17 Answered Questions

[SOLVED] $(window).width() not the same as media query

17 Answered Questions

[SOLVED] How to get the children of the $(this) selector?

19 Answered Questions

[SOLVED] How can I get the ID of an element using jQuery?

10 Answered Questions

[SOLVED] Div width 100% minus fixed amount of pixels

  • 2009-03-16 17:14:24
  • Removed_account
  • 233441 View
  • 307 Score
  • 10 Answer
  • Tags:   html css height width

4 Answered Questions

[SOLVED] JavaScript: Get window width minus scrollbar width

1 Answered Questions

[SOLVED] Media queries and scrollbar width

1 Answered Questions

Exclude scrollbar dimensions from percentages?

2 Answered Questions

[SOLVED] Cross-browser method for getting width and height of a DIV?

Sponsored Content