jQuery 动画高度 100% - #px

Question

我正在尝试在悬停时为 div 设置动画。 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'});
    });
});

height: '80%' 有效，但当调整窗口大小时、父高度更改以及动画 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); 
    }