将div设置为100％高度

我试图将div的动画设置为其内容的100％，但它只是闪烁，而不是使动画div动画背景在动画结束时消失。我很难过，因为它在我为高度输入数字而非百分比时起作用。将div设置为100％高度

$("#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"); 
    }); 
});

来源

2012-07-16 Ed Corcoran

“高度”属性在'％'用法上很少按照预期工作。你确定你不能用'bottom：0'或'top：0'来做这个动画吗？ – 2012-07-16 12:58:12

你能提供更多信息吗？你的HTML看起来像什么？你喜欢哪种风格？也许提供一个http://jsfiddle.net会有所帮助。另外高度：100％;在大多数情况下不会像人们希望的那样工作。 – Christoph 2012-07-16 12:58:16

为html和正文标记添加100％高度，然后再试一次 – 2012-07-16 12:58:55

通常情况下，您希望在使用百分比时避开高度。问题如下：

该div的高度是100％...什么？ 答案：父元素的高度的100％。太好了！父元素有多高？让我们来检查一下包含的元素的高度。嗯，这个孩子div的高度设置为100％...是什么？

所以循环继续......

有两个固定为此：

确保父元素有一个固定的高度（不是一个百分比，因为那将检查上面的父母等）。因此，只有在父标签具有固定高度时才可以使用高度百分比。
不要使用百分比，只给你的div一个固定的高度。

或者，相反，你可以把你的div换成新的div。将父项设置为固定高度，并且子项（旧的div）现在可以使用基于百分比的高度值。

来源

2012-07-16 14:17:03 Flater

谢谢，我结束了使用固定的高度。无论如何，我改变了我的设计，并且我以一个固定的高度结束了。 – 2012-07-17 10:14:09

我一直在这个问题上陷入困境。很难发现，但一旦你明白它就显得如此明显:-) – Flater 2012-07-17 13:13:15

不知道你可以用百分比去，为什么不使用JS先得到高度值，如果高度不固定。

然后用数字动画高度。

$("#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: $height + 'px',},"slow"); 
    }); 
});

来源

2012-07-16 12:58:57 bingjie2680

高度固定为隐藏起始位置。 – 2012-07-17 10:15:20

设置一个具有指定高度的外部div的想法对我来说不是一个可行的解决方案。我的php代码是一个模板，我的div的内容总是在变化 - 根据用户点击的链接从数据库中提取内容。这个div位于页面顶部，其他信息必须正确显示在其下。

所以，我想出了这个解决方案对我来说效果很好。

首先，我从CSS中删除了设置高度并添加了“display：none;” - 这允许div加载完全打开，但用户看不到它。

然后我使用JavaScript（本例中为jQuery）来获取高度。接下来，在jQuery中，我将显示设置为block，并将高度设置为我需要的“关闭”设置。最后，我用动画中的获得的高度来滑动div'open'。

的CSS代码：

#main_description { 
position: relative; 
display: none; 
/*height: 8.92855em; -> this was the original 'closed' height*/ 
border-bottom: 1px solid #a9a5a6; 
overflow: hidden; 
}

中的JavaScript：

var state = true; 
var descriptionHeight = $("#main_description").height(); 
// for testing -> alert("Description Height: " + descriptionHeight); 

$("#main_description").css({"display" : "block", "height" : "8.92855em"}); 

$("#main_description_toggle").click(function() 
{ 
    if (state) 
    { 
     $("#main_description").animate({ 
     height: descriptionHeight + "px" 
     }, 1000); 

     $("#main_description_toggle").html("<a>less &#9650;</a>"); 
    } 
    else 
    { 
     $("#main_description").animate({ 
     height: "8.92855em" 
     }, 1000); 

     $("#main_description_toggle").html("<a>more &#9660;</a>"); 
    } 
    state = !state; 
});

（我知道，8的高度。92855em似乎很奇怪，但是这是行高的5倍，客户想要5行文本来显示div何时“关闭”）。

来源

2015-09-16 15:00:50 seveninstl

将div设置为100％高度

回答

相关问题