jQuery UI Tabs-автоматическая Высота

все, что вам нужно сделать, это установить минимальную высоту. (Мне потребовалась целая вечность, чтобы найти ответ на этот вопрос .. Надеюсь, это поможет!).

вот мой код, который реально работает:

$("#tabs").tabs().css({
   'min-height': '400px',
   'overflow': 'auto'
});

в jQuery 1.9, используйте

после прочтения над документация, кажется, что опция больше не доступна. Тем не менее, очень легко воспроизвести эту функциональность.

предполагая, что ваши вкладки расположены горизонтально:

$("ul.tabs a").css('height', $("ul.tabs").height());

пример исходного кода из документации jQuery вы видите, что 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());

ответ Янниса верен для получения самой высокой высоты среди вкладок, но отсутствует код для фактического применения этого решения. Вам нужно добавить способ повторного отображения первой вкладки (которая будет исчезать кодом) и способ установки высоты каждой из областей содержимого.

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...Я не пробовал этого в других. Если это работает, вы можете создать отдельный класс для сохранения функциональности запаса и взаимозаменяемости тем и т. д.

BTW-причина, по которой вы может потребоваться динамический размер, если вы загружаете из Ajax, но не используете метод tab loader, а скорее другую функцию (их метод предполагает, что все содержимое поступает из одного ресурса 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');
});

Проверьте url:

http://api.jqueryui.com/tabs/#option-heightStyle

$("#tabs").tabs({ heightStyle: "fill" });