jQuery动画高度100% - #px

时间:2015-05-22 11:40:53

标签: jquery css

我试图在悬停时动画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%'可以正常工作但是当调整窗口大小,更改父高度并且动画div扩展太远时会出现问题。有没有办法指定高度:100% - 60px?

1 个答案:

答案 0 :(得分: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); 
    }