在我的UI我有一個手風琴的設置是這樣的：如何調整jQuery UI手風琴的高度？
<div id="object_list">
<h3>Section 1</h3>
<div>...content...</div>
// More sections
</div>
手風琴正常工作時，首先形成它，它似乎自行調節以及對內部各部分的內容。但是，如果我在.accordion（）調用之後（通過ajax）將更多內容添加到手風琴中，則該部分的內部結束了溢出。
由於手風琴被幾乎沒有內容構成，所有內部的div非常小，因此，內容溢出，你會得到手風琴的滾動條內幾乎沒有可視面積。
我試圖添加min-height樣式到object_list div，而內容div無濟於事。添加最小高度內的div樣的工作，但它搞砸了手風琴的動畫，並將其添加到object_list中的div也絕對沒有。
如何，我可以得到一個合理的規模出來的內容部分，即使沒有足夠的內容來填補那些部分？
當您聲明手風琴控制div時，可以在div的style標籤中加入高度。然後你可以設置fillSpace：真財產強制手風琴控制，以填補該div空間不管是什麼。這意味着您可以將高度設置爲最適合您的頁面。然後，您可以在添加代碼時更改div的高度
如果您希望手風琴根據需要動態調整其包含的內容，您可以執行以下技巧posted on the jQuery UI website。
//getter
var autoHeight = $(".selector").accordion("option", "autoHeight");
//setter
$(".selector").accordion("option", "autoHeight", false);
這意味着當您選擇一個文本很多的區域時，手風琴會重新計算它。
只需調用手風琴.resize()方法，這將重新計算其大小。 http://docs.jquery.com/UI/Accordion#method-resize
您仍然必須設置fillSpace：true並更改容器高度以使.resize（）工作。 – ICodeForCoffee 2010-05-15 18:20:46
謝謝，這爲我工作，但我需要使用'.accordion（「resize」）'而不是'.resize（）' – Rachel 2012-09-28 16:28:40
請注意，此方法[在1.9中不推薦]（http://jqueryui.com/upgrade -guide/1.9 /＃deprecated-resize-method-renamed-to-refresh）並且已經[在1.10中刪除]（http://jqueryui.com/upgrade-guide/1.10/#removed-resize-method-use-刷新）。您現在應該使用'.accordion（「refresh」）'來代替。 – nullability 2013-02-26 17:05:10
From the docs這聽起來像你需要設置
...也
autoHeight: false
我相信使用clearStyle允許你動態地添加內容，而手風琴的方式獲得。
那麼試試這個...
$(".selector").accordion({ clearStyle: true, autoHeight: false });
這一個爲我工作！ :) – 2012-09-27 20:55:55
像冠軍 – 2013-03-27 17:49:44
工作得很好。謝謝。 – Mythul 2013-07-07 18:40:19
它看起來像這裏所有的答案，現在使用不提倡的選項。
使用最新版本的jQuery UI（1.10.x），您應該用heightStyle: "fill"初始化手風琴以獲得預期的效果。
$(".selector").accordion({ heightStyle: "fill" });
您可以在jQuery UI的API文檔在這裏閱讀更多：http://api.jqueryui.com/accordion/#option-heightStyle
如果你的頁面尺寸動態改變，你需要重新計算你的手風琴大小，你應該使用refresh方法刷新你的手風琴：
$(".selector").accordion("refresh");
這是首選，因爲resize方法現在已被棄用。
用途：
$('#id').accordion({heightStyle: 'content'});
自動大小你內心的div。
UPDATE：
我看到，這仍然是一個相當活躍的帖子，所以我決定，以確保我的回答仍然是有效的。看起來這可能不再適用於jQuery UI 1.11。它指出[content]屬性已被棄用，並使用[panel]來代替。使得現在的代碼片段更是這樣看的東西：
$('#id').accordion({heightStyle: 'panel'});
我還沒有測試過，剛發現，並且將返回，並刪除此評論時，我有時間來測試
對於最新版本的正確答案的關鍵，我想知道爲什麼這不是默認行爲... – redaxmedia 2014-01-06 10:39:36
我剛開始使用此插件，並且此選項確實解決了我遇到的問題jqueryUI將內容的高度設置爲最高面板。在版本1.11.4中感謝 – AntonioCS 2015-03-08 19:55:57
我仍然需要在「選項」下定義：'heightStyle：「content」，「來修復標準高度500px。謝謝！ – Silvan 2015-08-04 09:46:52
設置DIV的身高會做到這一點。
$(document).ready(function() {
$("#accordion").show().accordion({
autoHeight: false
});
$("#accordion div").css({ 'height': 'auto' });
});
我最近設置了一個手風琴，它通過ajax檢索內容，當標籤被激活並且遇到同樣的問題時。我嘗試使用這裏發佈的一些建議，但是直到我將heightStyle設置爲內容時，才正確地增大了面板的大小。
$("#myaccordion").accordion({
heightStyle: "content",
activate: function(event ui) {
//use ajax to retrieve content here.
}
});
我正在使用jQuery-UI版本1.10.4。
對我來說做下面工作準確。
$("#accordion").accordion({
autoHeight: false,
}）;
在您的jquery-ui.js中搜索以下部分並將heightstyle: "auto"更改爲heightstyle: "content"，以便更新後的文件如下所示。
var accordion = $.widget("ui.accordion", {
version: "1.11.4",
options: {
active: 0,
animate: {},
collapsible: false,
event: "click",
header: "> li > :first-child,> :not(li):even",
heightStyle: "content",
icons: {
activeHeader: "ui-icon-triangle-1-s",
header: "ui-icon-triangle-1-e"
},
// callbacks
activate: null,
beforeActivate: null
},
關閉自動將工作...（除了自動或填充以外的任何字符串），例如告訴使用「面板」的解決方案。但是...
這與放入任何垃圾字符串"heightStyle"相同。您正在尋找的"heightStyle"是"content"。
"auto"（在jQuery UI的1.12值選項"heightStyle"）：所有的面板將被設置爲最高的高度面板。"fill"：根據手風琴的父母高度展開到可用高度。"content"：每個面板只會與其內容一樣高。例子： https://jsfiddle.net/qkxyodpq/5/
希望有所幫助。
我真的不明白爲什麼autoHeight = false會使它工作（看起來它應該表現得相反），但它工作。乾杯! – KallDrexx 2010-05-16 02:53:30
@ICodeForCoffee我有同樣的查詢...我需要在哪裏寫入// getter和setter代碼 – 2012-07-20 07:38:40
@pradnya直接到您的手風琴的JavaScript部分。您只需獲取屬性/選項autoHeight並將其設置爲false即可。 – 2012-07-24 17:24:31