在jQuery tabs 的早期版本中，有一个选项可以自动将选项卡的高度设置为组中最高选项卡的高度：
$('#container').tabs({ fxAutoHeight: true });
但是这在jQuery UI 1.5.3 中似乎不起作用。
这个选项被删除了吗？如果是这样，是否有其他方法可以获得相同的功能？
【问题讨论】：
标签： jquery jquery-ui tabs jquery-ui-tabs
您所要做的就是设置一个最小高度。 （我花了很长时间才找到这个问题的答案......我希望它有所帮助！）。
这是我真正有效的代码：
$("#tabs").tabs().css({
'min-height': '400px',
'overflow': 'auto'
});
【讨论】：
在 jQuery 1.9 中，使用 heightStyle 属性 (docs here)
$( ".selector" ).tabs({ heightStyle: "auto" });
【讨论】：
阅读the documentation 后，该选项似乎不再可用。但是，复制此功能非常容易。
假设你的标签是水平排列的：
$("ul.tabs a").css('height', $("ul.tabs").height());
【讨论】：
它似乎不再存在，请查看此插件以获得相同的功能
【讨论】：
gabriel 的示例给了我正确的线索，但我无法让它完全像那样工作。查看 jQuery 文档的 source code example 时，您会看到 HTML 代码应该如下所示：
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>
</div>
...
</div>
因为我有 3 个选项卡的内容相当静态，所以对我来说，将所有选项卡的高度设置为最高的选项卡的高度就足够了，在我的例子中是 #fragment-1。
这是执行此操作的代码：
$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());
【讨论】：
Giannis 的答案对于获得选项卡中的最高高度是正确的，但缺少实际应用该解决方案的代码。您需要添加一种方法来重新显示第一个选项卡（它将被代码消失）和一种设置每个内容区域高度的方法。
var height = 0;
//Get the highest height.
$("#tables .ui-widget-content").each(function(){
$(this).removeClass('ui-tabs-hide');
var oheight = height; //used to identify tab 0
if(height < $(this).height())
{
height = $(this).height();
}
if(oheight != 0)
{
$(this).addClass('ui-tabs-hide');
}
});
//Apply it to each one...
$("#tables .ui-widget-content").height(height);
【讨论】：
var biggestHeight = 0;
jQuery.each($(this).find(".ui-tabs-panel"),
function (index, element) {
var needAppend = false;
if ($(element).hasClass('ui-tabs-hide')) {
$(element).removeClass('ui-tabs-hide');
needAppend = true;
}
if ($(element).height() > biggestHeight)
biggestHeight = $(element).height();
if (needAppend)
$(element).addClass('ui-tabs-hide');
});
【讨论】：
我只是在寻找这个解决方案，只有在您提前知道最小高度应该多高的情况下，设置最小高度才有效。
相反，我进入 css 并更改 ui-tabs 类以添加“overflow:auto;”如下
.ui-tabs { overflow: auto; position: relative; padding: .2em; zoom: 1; }
这在 FF12 中对我有用...我还没有在其他人中尝试过。如果这可行，您可能希望创建一个单独的类来保留库存功能和主题互换性等
顺便说一句 - 您可能需要动态调整大小的原因是，如果您从 Ajax 加载，但不使用选项卡加载器方法，而是使用另一个函数（他们的方法假设您的内容全部来自一个可能不是的 url 资源足够取决于您的动态人口的先进程度）。
HTH
【讨论】：
设置标签最小高度和调整属性为无...
示例：
$("#tab").tabs().css({'resize':'none','min-height':'300px'});
【讨论】：
var height = 0;
$("#tabs .ui-widget-content").each(function(){
$(this).removeClass('ui-tabs-hide');
if(height < $(this).height())
height = $(this).height();
$(this).addClass('ui-tabs-hide');
});
【讨论】：
【讨论】：