将div动画化为100％的高度 [英] Animating a div to 100% height

问题描述

我正在尝试使div的动画达到其内容的100％，但它只是闪烁，而不是对div进行动画处理，因此背景在动画结束时消失了.我很沮丧，因为当我输入高度数字而不是百分比数字时，它会起作用.

I am trying to animate a div to 100% of its content but it just flashes and rather than animate the div the background disappears at the end of the animation. i am stumped because it works when i enter a number for the height rather than a percentage.

$("#artbutton").click(function(event){
    event.preventDefault();
    var $self=$(this);
    $("#media").animate({height:0},"slow");
    $("#music").animate({height:0},"slow",function(){
        document.location = $self.attr('href');
        $("#art").animate({height:"100%"},"slow");
    });
});

推荐答案

通常，您要避免使用涉及身高的百分比.问题如下:

Usually you want to steer clear from using percentages when it comes to height. The problem is the following:

div的高度是100％...是什么? 答案:父元素高度的100％.好，很好！父元素有多高?让我们检查一下其中包含的元素的高度.嗯，这个子div的高度设置为100％...是什么?

The div's height is 100%... of what? Answer: 100% of the height of the parent element. OK, great! How high is the parent element? Let's check what the height is of the elements contained within. Hmmm, this child div has its height set to 100%... of what?

因此循环继续...

对此有两个修复程序:

1. 确保父元素具有固定的高度(不是百分比)，因为它将检查上面的父元素，依此类推...). 因此，只有当父标记的高度固定时，您才可以使用height-percentages.
2. 不要使用百分比，而只是将div设置为固定高度.

1. Make sure the parent element has a fixed height (not a percentage, because then it would check the parent above, etc...). So you can use height-percentages only if the parent tag has a fixed height.
2. Don't use percentages and just give your div a fixed height.

或者相反，您可以将div包装在新的div中.将父级设置为固定高度，子级(旧div)现在可以使用基于百分比的高度值.

Or, conversely, you can wrap you div in a new div. Set the parent to a fixed height and the child (the old div) can now use percentage-based height values.

这篇关于将div动画化为100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！