如何使用jQuery计算元素跨浏览器的高度? [英] How can I calculate the height of an element cross-browser using jQuery?

问题描述

我创建了一个插件来使元素底部对齐.我以最简单的形式执行了此操作:

I created a plugin to bottom-align a element. In it's simplest form I did this:

1. 获取externalElement(DIV)的高度
2. 获取当前元素的高度
3. 结果= outsideHeight-当前元素的高度
4. sett CSS属性"top" =结果.

它可以在Firefox和IE8中运行，但在Opera或Google Chrome中无法运行.

And it works... in Firefox and IE8, but not in Opera or Google Chrome.

我猜这与边框，填充和边距有关.那么，为了使其能够跨浏览器工作，我该怎么办?

I'm guessing it has to do with borders, padding and margin. So what do I have to do in order to make it work cross-browser?

更新
代码已修改，现在可以使用.

UPDATE
Code has been revised and is working now.

(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可能看起来像这样:

The HTML could look something like this:

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

并应用我的jQuery插件:

and applying my jQuery plugin:

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

推荐答案

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

You probably need to look into the outerHeight() jQuery method:

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

您可能还需要玩.position().top，这是元素已经从包含元素的顶部移开的距离:

You also probably need to play with .position().top which is the distance the element already is moved away from the top of the containing element:

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

另一种方法

关于position:relative的几件事.这样放置的元素会占用空间，但可以在任何方向上移动.请注意，移动它们不会改变它们占据空间的位置，只会改变元素显示的位置.

A couple things about position:relative. Elements positioned like this will take up space, but can be shifted in any direction. Note that shifting them does not change where they took up space, only where the element displays.

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

About position:absolute. An absolutely positioned element does not take up space, but needs to be inside an element that has position (i.e. position:relative)

因此，在纯CSS中:

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

但是请注意，它过去占用的任何位置(即由于浮动浮动)将不再占用.

But note that any position it used to take up (i.e. because of the float right) it will no longer take up.

这篇关于如何使用jQuery计算元素跨浏览器的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！