jQuery를 사용하여 크로스 브라우저 요소의 높이를 어떻게 계산합니까?

Question

요소를 아래쪽 정렬하는 플러그인을 만들었습니다. 그것이 내가 이런 짓을 간단한 형태의에서 :

1. outerElement (DIV) 현재 요소의
2. 가져 오기 높이의 가져 오기 높이
3. 결과 = outerHeight - 현재 요소의 높이
4. 정 CSS 속성 '최고'= 결과.

Firefox 및 IE8에서는 작동하지만 Opera 또는 Chrome에서는 작동하지 않습니다.

테두리, 패딩 및 여백과 관련이 있다고 생각합니다. 브라우저간에 상호 작동하려면 어떻게해야합니까?

업데이트
코드가 개정되어 현재 작업 중입니다.

(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 

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

또 다른 방법

몇 가지 약 position:relative :당신은 아마 이미 요소가 포함 된 요소의 상단에서 멀리 이동 거리이다 .position().top 함께 플레이해야합니다. 이와 같이 배치 된 요소는 공간을 차지하지만 임의의 방향으로 이동할 수 있습니다. 요소를 이동하는 곳에서 공간을 차지하는 위치는 변경되지 않습니다.

약 position:absolute. 절대적으로 위치 요소는 공간을 차지하지만,

그래서 위치 (예 : position:relative)가 요소 내부에 있어야합니다, 바로 CSS에서하지 않습니다

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

을하지만, 어떤 위치가 걸릴하는 데 사용주의 (즉, 부유물 때문에) 더 이상지지 않을 것입니다.