Get the full width of an element when it has absolutely positioned child elements inside it

Question

JS Fiddle: http://jsfiddle.net/meYnS/3/

Suppose I have a .outer element with a width of 100 pixels and position:relative; . It has an internal element that has position:absolute; and left:95px; . That is, the child element exceeds the width of the parent element.

Now, in JQUery, if I try to get the width of the parent using $('.outer').outerWidth(); he will return 100.

But how can I get the full width of the outer element (which is obviously greater than 100, due to the absolutely positioned child element)?

Is there a built-in way or do I need to do a manual calculation (i.e. adding each width of the child to the parent width to determine the full width)?

Answer 1

You can use the scrollWidth , scrollHeight .

If you are using jQuery,

 $('.outer').get(0).scrollWidth 

Answer 2

You set the width to 100 pixels, and the child is absolute, so it will not affect the width of its parent. The width of the parent is still 100px.

Answer 3

jQuery does not provide access to the javascript scrollWidth property, so you need to access the DOM element using jQuery.

jQuery get () is a method for reaching the DOM element.

so a solution using jQuery $('.outer').get(0).scrollWidth

If you use the original javascript, the solution will be document.getElementsByClassName('outer')[0].scrollWidth