Jquery는 지정된 요소에서 높이를 계산합니다.

Question

div가 있고 두 개의 자식이 절대 위치합니다. 상단의 어린이는 50 픽셀 (상단 : 50 픽셀)으로 움직였습니다. 하단의 어린이는 50 픽셀 (하단 : -50 픽셀)과 같이 부모의 끝에서 아래쪽으로 움직였습니다.뿐만 아니라 클라이언트가 원하는 콘텐츠에 따라 성장할 수 있습니다. .

이제이 부모를 수직으로 중심에 두어야합니다. 그래서 부모를 따라 이동 한 모든 자식을 포함하여 부모의 전체 높이가 필요합니다. 이 총 높이를 어떻게 얻을 수 있습니까?

이 함수를 사용했지만 div의 적절한 높이를 얻지 못했습니다. 그것은 부모의 높이만을 보여 주며, 아이들의 움직임을 포함하지 않으며 높이를 가지고 있습니다.

alert($('#imgHolder').outerHeight(true)); 

어느 하나가 총 높이를 얻을 수 있습니까?

Answer 1

절대적으로 요소를 배치 할 때 요소를 페이지의 흐름에서 제거합니다. 그래서 height, width, outerwidth, scrollWidth 등은 작동하지 않을 것입니다. 계산은 직접해야합니다.

귀하의 설명은 실제로 따라하기 힘듭니다 (그림은 당신이 측정하고 싶은 것과 함께 도움이 될 것입니다).하지만 자녀의 요소가 부모의 일부 밖에있는 것처럼 들립니다. 화면 높이에 포함 시키려면 위치를 가져온 다음 경계 상자를 수동으로 계산하십시오.

나는 모든 계산을 알아 내지는 못하지만,이 수치를 사용하여 자신을 계산할 수 있어야합니다. 부모가 상대적으로 위치한다고 가정하면, 아이의 위치 속성은 그것과 관련 될 것입니다.

//option1 - based on position property find top/bottom 
childHeight = $('#child').height(); 
childWidth = $('#child').width(); 
childTop = $('#child').position().top; 
childBottom = childTop + childHeight; 
childLeft = $('#child').position().left; 
childRight = childLeft + childWdith; 

대신 오프셋을 사용할 수 있다면 각 자식 div의 위아래를 가져옵니다. 가장 작은 값과 가장 큰 값이 무엇이든간에 그 값을 유지하십시오.

//option2 - based on offset property find top/bottom 
var top = null; 
var bottom = null; 
foreach (child) { 
    childTop = child.offset().top; 
    childBottom = child.offset().bottom; 
    if (top === null || top <== childTop) { top = childTop; } 
    if (bottom === null || bottom >== childBottom) { bottom = childBottom; } 
}