如何使用jQuery計算元素跨瀏覽器的高度？

我創建了一個插件來對齊一個元素。在這我這樣做最簡單的形式：如何使用jQuery計算元素跨瀏覽器的高度？

outerElement（DIV）
當前元素的獲取高度獲取高度
結果= outerHeight - 當前元素的高度
SETT CSS屬性 '頂'=結果。

它可以在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"> 
    <div class="floatLeft"> Variable content here </div> 
    <img class="bottomAlign floatRight" src="" /> </div> 
</div>

和運用我的jQuery插件：

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

來源

2010-01-11 Steven

Steven，有沒有什麼理由你不使用'position：absolute;底部：0'？ – 2010-01-11 17:00:39

因爲當父元素的大小可變時它不起作用。 – Steven 2010-01-11 17:52:57

你可能需要考慮的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 }

但是請注意，任何位置，它用於拍攝（即因爲浮動權），它將不再佔用。

來源

2010-01-11 17:04:10

啊，謝謝。這owkred。這個解決方案的唯一問題是內部元素的一半被推到外部div之外。爲了解決這個問題，我只是將elementHeight與2相乘 - 使它保留在外部div中。 – Steven 2010-01-11 17:29:28

當然，這隻適用於我只有30像素高的圖像。 – Steven 2010-01-11 17:30:47

@Steven我加入到我的答案中，希望它指出你在正確的方向。 – 2010-01-11 17:52:22

如何使用jQuery計算元素跨瀏覽器的高度？

回答

相關問題