如何使用jQuery计算元素跨浏览器的高度?
我创建了一个插件来底部对齐元素。 在它最简单的forms我这样做:
- 获取outerElement(DIV)的高度
- 获取当前元素的高度
- result = outerHeight – 当前元素的高度
- 设置CSS属性’top’=结果。
它适用于Firefox和IE8,但不适用于Opera或Google Chrome。
我猜它与边框,填充和边距有关。 那么我需要做些什么才能让它跨浏览器工作呢?
UPDATE
代码已经修订,现在正在运行。
(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"> Variable content here