Question

I have a div, and it has two children absolutely positioned. and the top children moved 50px (top:50px)and it is growable, as well bottom child is moved down from the end of the parent like 50px (bottom:-50px), as well it can growable according to the content client will palce.

Now i need to vertically center this parent, so i need the total height of the parent including the child whatever then moved from out of parent and as much that may grown. how can i get this total height?

i used this function, but i am not get the proper height of the div. it shows only the parent height, it is not include the children what it moved and it has the height.

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

any one can help me to get the total height?

Answer 1

When you absolutely position an element it removes it from the flow of the page. So height, width, outerwidth, scrollWidth etc are not going to work. You will need to do the calcuations yourself.

Your description is really hard to follow (a picture would help along with what you want to measure), but it sounds like your child elements lie outside some portion of their parent. To have them included in the screen height, get their positions and then manually calculate the bounding box.

I’m not going to figure out all the calculations for you, but you should be able to use these figures to calculate yourself. Assuming the parent is relatively positioned the position property of child will be in relation to that.

//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;

Or if you can use offset instead then just get each child div’s top and bottom. Keep whatever the smallest and largest values are and that is your height.

//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; }
}