jQuery动画高度100％ - #px

Question

我试图在悬停时动画div。 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'});
    });
});

身高：＆＃39> 80％＆＃39;可以正常工作但是当调整窗口大小，更改父高度并且动画div扩展太远时会出现问题。有没有办法指定高度：100％ - 60px？

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