jQuery 使用jquery查找div底部的位置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12749844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:59:14  来源:igfitidea点击:

Finding the position of bottom of a div with jquery

jquery

提问by lagwagon223

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?

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

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

回答by user1026361

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 trnelsonthis 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.

正如trnelson所指出的,这在 100% 的情况下都不起作用。要对定位元素使用此方法,您还必须考虑偏移。有关示例,请参阅以下代码。

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

回答by yoyodunno

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:

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

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

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

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

回答by Sly

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.

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

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

回答by Jish

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

回答by zzzzBov

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

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

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

回答by Cecil Theodore

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