Tengo un padre con una altura fija (400 px) y una altura de div de niño mayor que la altura de div de padre (400 px - valor máximo de div de niño) debe basarse en las siguientes condiciones.

• Altura del div principal: valor de posición superior del div secundario (por ejemplo, 40 px en este escenario)

Por lo tanto, finalmente, la altura de div infantil debe ser de 360 px (400 px - valor máximo de div infantil de -40 px)

HTML:

 <div class="parent"> <div class="child"> Parent Height: <span id="parentHeight"></span><br> Distance from top: <span id="distanceFromTop"></span><br> Child Height: <span id="childHeight"></span><br> </div> </div>

Guion:

 var __parentHeight = $('.parent').height(); var __distanceFromTop = $('.parent').offset().top - $('.child').offset().top; var __finalHeight = parseInt(__parentHeight) - parseInt(__distanceFromTop); $('#parentHeight').html(__parentHeight + 'px'); $('#distanceFromTop').html(__distanceFromTop + 'px'); $('#childHeight').html(__finalHeight + 'px'); $('.child').css('height', __finalHeight + 'px');

jsviolín

Esperado:

Lo que obtengo es: