Using:

 $(my_div).width(window.innerWidth)

Does not provide the desired result, because it does not account for the vertical scrollbar, so the element overflows the window, creating a horizontal scrollbar, as illustred below.

Illustration .png

Using:

 $(my_div).width(window.innerWidth)

Does not provide the desired result, because it does not account for the vertical scrollbar, so the element overflows the window, creating a horizontal scrollbar, as illustred below.

Illustration http://dl.dropboxusercontent./u/62862049/Screenshots/om.png

• javascript
• jquery
• css
• html

• There's something similar in another post, diff problem though, but the information in there might help you achieve this/ LINK – Belhor Commented Jun 7, 2013 at 14:52
• I bet you didn't account for the padding, border and margins on my_div, did you? – Blazemonger Commented Jun 7, 2013 at 14:52
• @Blazemonger actually I did in the actual code. (; – MaiaVictor Commented Jun 7, 2013 at 14:53
• Can you show us the actual code, then, please? – Blazemonger Commented Jun 7, 2013 at 14:53

4 Answers 4

You could use width:100%

<div style="width:100%;height:1500px;background:red"></div>

Demo

window.innerWidth includes the width of the vertical scrollbar in some versions of Firefox:

https://developer.mozilla/en-US/docs/Web/API/window.innerWidth

however, w3schools seems to disagree (it says it doesn't include the width of the scrollbar):

http://www.w3schools./jsref/prop_win_innerheight.asp

There's even a bug concerning this in the Mozilla bug tracker:

https://bugzilla.mozilla/show_bug.cgi?id=156388#c14

The confusion above has been cleared a bit with CSS3, which has a specific property to calculate widths, box-sizing. Set box-sizing like this:

box-sizing: border-box

Which does the following (quoted from w3schools):

The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties

You can use width:100% as noted, but bear in mind that this will ALSO include any extra spacing and padding you got - however, in CSS3-enabled browsers, this is resolved with the correct box-sizing property, as noted above. So, if you got, say a div like:

<div style="width:100%; padding: 20px;">
  <div style="width:100%; background:red">Test</div>
</div>

The inner div will go off-bounds according to the CSS21 spec. Here's a jsFiddle that illustrates this problem.

So, make sure that you don't have any padding to avoid such issues.

If you want to use jQuery to get the width of the window, you could use jQuery's width() method (or css("width")).

Could you use

$(my_div).css('width', '100%');

?

$(my_div).css("width", "100%");

or

#my_div {
  width: 100%;
}

You're also probably going to want to make sure your body or parent div has no padding or margin:

body {
  padding: 0;
  margin: 0;
}