jQuery aimate height 100% - #px

Question

Я пытаюсь анимировать div на hover. Div находится внутри другого div, который имеет разную высоту в зависимости от размера окна. Моя цель - оживить внутренний div до его родительского div минус 60px (высота заголовка фиксированной позиции), а затем вернуться к исходной высоте в функции обратного вызова. Вот мой код, который работает, но не так, как я хотел бы:

jQuery(document).ready(function() { 
    jQuery("#sidebar-top").hoverIntent(
     function() { 
      jQuery("#sidebar-top .slide-excerpt").animate({height: '80%'}); 
     }, 
     function() { 
      jQuery("#sidebar-top .slide-excerpt").animate({height: '85px'}); 
    }); 
}); 

высота: '80%»работает, но проблема возникает, когда при изменении размера окна, родительская высота изменяется, и анимированный ДИВ продолжается очень далеко. Есть ли способ указать высоту: 100% - 60 пикселей?

Answer 1

Вы можете рассчитать высоту и ширину с calc значения:

#sidebar-top .slide-excerpt { 
    height: -moz-calc(100% - 60px); 
    height: -webkit-calc(100% - 60px); 
    height: -o-calc(100% - 60px);  
    height: calc(100% - 60px); 
    }