Finding the position of bottom of a div with jquery

Question

I have a div and want to find the bottom position. I can find the top position of the Div like this, but how do I find the bottom position?

var top = $('#bottom').position().top; return top; 

Answer 1

Add the outerheight to the top and you have the bottom, relative to the parent element:

var $el = $('#bottom');  //record the elem so you don't crawl the DOM everytime   var bottom = $el.position().top + $el.outerHeight(true); // passing "true" will also include the top and bottom margin 

With absolutely positioned elements or when positioning relative to the document, you will need to instead evaluate using offset:

var bottom = $el.offset().top + $el.outerHeight(true); 

As pointed out by trnelson this does not work 100% of the time. To use this method for positioned elements, you also must account for offset. For an example see the following code.

var bottom = $el.position().top + $el.offset().top + $el.outerHeight(true);