CODEWITHSUNDEEP
javascriptjquerycsshtml
MaiaVictor
MaiaVictor

Reputation: 52957

How to set an element's width equal to window's width?

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.com/u/62862049/Screenshots/om.png

Upvotes: 0

Views: 2467

Answers (4)

Jon
Jon

Reputation: 976

$(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;
}

Upvotes: 0

Filippos Karapetis
Filippos Karapetis

Reputation: 4652

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

https://developer.mozilla.org/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.com/jsref/prop_win_innerheight.asp

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

https://bugzilla.mozilla.org/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")).

Upvotes: 3

Jimbali
Jimbali

Reputation: 2518

Could you use

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

?

Upvotes: 0

Anton
Anton

Reputation: 32581

You could use width:100%

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

Demo

Upvotes: 7

Related Questions