I was trying to make a "one size fits all" method for dynamic height resizing (by hiding the element I was resizing and then comparing parent height to parent's parent height) when I noticed that .height() (and .outerHeight(true)) were failing to return the correct value.

For the sake of simplicity, we'll call the elements a > b > c > d, e (with d & e being siblings)

a is a fixed height element (height: 640px) (no padding/margin)

b is a fixed height element (positioned absolutely to top,right,bottom,left: 20px, no padding/margin - so is height: 600px by inference)

c is a variable height element (no padding/margin)

d is a fixed height element (height: 10px) (no padding, has 20px total vertical margin)

e is a fixed height element (element to be resized) (no padding/margin)

If I hide e, then do b.height() - c.height() then it should return 570px as the height of d should be stretching the height of c to 30px, however what is actually being returned is 590px.

The same happens if I call b.height() - c.outerHeight(true)