在我的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