78

我有一个 div 并想找到底部位置。我可以像这样找到 Div 的顶部位置，但是如何找到底部位置？

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

8 回答 8

171

相对于父元素，将 outerheight 添加到顶部，得到底部：

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

对于绝对定位的元素或相对于文档定位时，您将需要使用偏移量进行评估： 

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

正如trnelson所指出的，这在 100% 的时间里都不起作用。要将此方法用于定位元素，您还必须考虑偏移量。有关示例，请参见以下代码。

var bottom = $el.position().top + $el.offset().top + $el.outerHeight(true);
于 2012-10-05T15:57:06.963 回答
15

编辑：这个解决方案现在也在原始答案中。

接受的答案并不完全正确。您不应该使用 position() 函数，因为它是相对于父级的。如果您正在进行全球定位（在大多数情况下？），您应该只添加偏移顶部和外部高度，如下所示：

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

文档http://api.jquery.com/offset/

于 2015-05-19T05:23:12.657 回答
5 
var bottom = $('#bottom').position().top + $('#bottom').height();
于 2012-10-05T15:57:34.830 回答
5

到目前为止的答案将起作用..如果您只想使用没有填充、边框等的高度。

如果您想考虑填充、边框和边距，您应该使用.outerHeight.

var bottom = $('#bottom').position().top + $('#bottom').outerHeight(true);
于 2012-10-05T16:00:09.157 回答
1

底部是top+ the outerHeight，而不是height，因为它不包括边距或填充。

var $bot,
    top,
    bottom;
$bot = $('#bottom');
top = $bot.position().top;
bottom = top + $bot.outerHeight(true); //true is necessary to include the margins
于 2012-10-05T15:58:26.277 回答
0 
var top = ($('#bottom').position().top) + ($('#bottom').height());
于 2012-10-05T16:01:31.980 回答
0

这是 jquery 实际上使它比 DOM 已经提供的更复杂的实例之一。

let { top, bottom, height, width, //etc } = $('#bottom')[0].getBoundingClientRect();
return top;
于 2020-07-21T17:35:42.047 回答
0

使用此脚本计算 div 的结尾

$('#bottom').offset().top +$('#bottom').height()
于 2020-09-27T13:39:37.067 回答