將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％高度

回答

相關問題