Jqueryは、正の要素からの高さを計算します

Question

私はdivを持ち、絶対に配置された2つの子を持っています。上位の子供は50px（上：50px）に移動し、それは成長可能であり、下位の子供は50px（下：-50px）のように親の終わりから下に移動し、クライアントの意図するコンテンツに従って成長する。

今、私はこの親を垂直に中心にする必要があるので、私は親を含めて親の全体の高さが必要です。どのように私はこの合計の高さを得ることができますか？

私はこの機能を使用しましたが、私はdivの適切な高さを得ていません。それは親の高さだけを表示します、それは移動したものとそれが高さを持つ子を含みません。

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

いずれか1つは全高を得るのに役立ちますか？

Answer 1

要素を絶対配置すると、要素がページのフローから削除されます。だから、高さ、幅、外幅、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; } 
}