如何使用jQuery计算跨浏览器元素的高度？

Question

我创建了一个插件来对齐一个元素。这是我最简单的做法：

1. 获取outerElement (DIV)的高度(
2. )获取当前元素的高度(
3. result = outerHeight )--当前元素的高度(
4. sett )属性'top‘=
5. 。

而且效果很好..。在火狐和IE8中，但没有在Opera或Google中。

我猜这和边框，填充和毛边有关。那么，我要做什么才能使它跨浏览器工作呢？

更新

代码已经修改，现在正在工作。

(function($){
    $.fn.alignBottom = function() 
    {

        var defaults = {
            outerHight: 0,
            elementHeight: 0
        };

        var options = $.extend(defaults, options);
        var bpHeight = 0; // Border + padding

        return this.each(function() 
        {
            options.outerHight = $(this).parent().outerHeight();
            bpHeight = options.outerHight - $(this).parent().height();
            options.elementHeight = $(this).outerHeight(true) + bpHeight;


            $(this).css({'position':'relative','top':options.outerHight-(options.elementHeight)+'px'});
        });
    };
})(jQuery);

HTML看起来可能如下所示：

div class="myOuterDiv">
    <div class="floatLeft"> Variable content here </div>
    <img class="bottomAlign floatRight" src="" /> </div>
</div>

并应用我的jQuery插件：

jQuery(".bottomAlign").alignBottom();

Answer 1

您可能需要查看outerHeight() jQuery方法：

options.outerHight = $(this).parent().outerHeight();
options.elementHeight = $(this).outerHeight( true ); // Include margins

您还可能需要使用.position().top，即元素已经从包含元素的顶部移开的距离：

var new_top = $(this).parent().outerHeight() - $(this).outerHeight() - $(this).position().top;

另一种方法

关于position:relative的一些事情。像这样定位的元素将占用空间，但可以向任何方向移动。请注意，移动它们不会改变它们占用空间的位置，只会改变元素显示的位置。

关于position:absolute。绝对定位的元素不占用空间，但需要位于具有位置的元素(即position:relative)内。

因此，在直接CSS中：

.myOuterDiv { position: relative }
.bottomAlign { position: absolute; bottom: 0 }

但请注意，它曾经占据的任何位置(即由于浮动的权利)将不再占据。