Finding the position of bottom of a div with jquery

Jquery

Jquery Problem Overview


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;

Jquery Solutions


Solution 1 - Jquery

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);

Solution 2 - Jquery

EDIT: this solution is now in the original answer too.

The accepted answer is not quite correct. You should not be using the position() function since it is relative to the parent. If you are doing global positioning(in most cases?) you should only add the offset top with the outerheight like so:

var actualBottom = $(selector).offset().top + $(selector).outerHeight(true);

The docs http://api.jquery.com/offset/

Solution 3 - Jquery

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

Solution 4 - Jquery

The answers so far will work.. if you only want to use the height without padding, borders, etc.

If you would like to account for padding, borders, and margin, you should use .outerHeight.

var bottom = $('#bottom').position().top + $('#bottom').outerHeight(true);

Solution 5 - Jquery

The bottom is the top + the outerHeight, not the height, as it wouldn't include the margin or padding.

var $bot,
    top,
    bottom;
$bot = $('#bottom');
top = $bot.position().top;
bottom = top + $bot.outerHeight(true); //true is necessary to include the margins

Solution 6 - Jquery

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

Solution 7 - Jquery

This is one of those instances where jquery actually makes it more complicated than what the DOM already provides.

let { top, bottom, height, width, //etc } = $('#bottom')[0].getBoundingClientRect();
return top;

Solution 8 - Jquery

use this script to calculate end of div

$('#bottom').offset().top +$('#bottom').height()

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionlagwagon223View Question on Stackoverflow
Solution 1 - Jqueryuser1026361View Answer on Stackoverflow
Solution 2 - JqueryyoyodunnoView Answer on Stackoverflow
Solution 3 - JqueryJishView Answer on Stackoverflow
Solution 4 - JquerySlyView Answer on Stackoverflow
Solution 5 - JqueryzzzzBovView Answer on Stackoverflow
Solution 6 - JqueryCecil TheodoreView Answer on Stackoverflow
Solution 7 - JqueryMichael Aaron WilsonView Answer on Stackoverflow
Solution 8 - Jqueryfatemeh sadeghiView Answer on Stackoverflow