3

你如何设置 jquery 选项卡以形成 100% 的高度？

我还需要调整其中的 iframe 的大小以扩展到 100% 的高度。

谢谢你！

4

5 回答 5

6

要调整 UI 选项卡的大小（至少是最新的 1.7.2 版本），它使用以下代码：

$ (document).ready (function () {
function resizeUi() {
    var h = $(window).height();
    var w = $(window).width();
    $("#tabs").css('height', h-95 );
    $(".ui-tabs-panel").css('height', h-140 );
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeUi, 100);
});
resizeUi();
}

加上以下CSS：

#tabs { 
    display: inline-block; 
    width:325px;
}

您必须根据需要编辑一些数字。

于 2009-10-26T16:47:35.120 回答
3

如果它对其他人有任何用处，我会在“显示”和“添加”中添加一些回调，以便始终获得完美的高度。在我的情况下，顶部容器具有类“ui-layout-pane”（因为我使用 jquery 布局），但这应该适用于任何类。

myTab = $("#tabs").tabs({
    show: function(e,ui){
        var $c = $(ui.panel), h = parseInt($(ui.tab).parent().outerHeight());
        while ( $c.length > 0 && !$c.hasClass("ui-layout-pane") ){
            h += ( $c.outerHeight(true) - $c.innerHeight() );
            $c = $c.parent();
        }
        h = parseInt($c.innerHeight() - h );
        $(ui.panel).height(h);
        return true;
    },
    add: function(e,ui){
        $(this).tabs("select",ui.index);
    }
});
于 2011-11-20T15:51:08.760 回答
0

我认为您不能仅使用 css 可靠地（跨浏览器）做到这一点。

也许您应该使用 jquery 来获取页面的高度并像这样设置每个元素：

$(window).resize(function() {
   var wh = parseInt($(window).height());

   if ($.browser.opera) {
      wh = $.browser.version > "9.5" ? document.documentElement["clientHeight"] : wh;
   }

   $('#elementid').css("height", wh);
});
于 2009-07-24T09:09:03.750 回答
-2

您可以使用高度为 100% 的 div 让选项卡内容展开以覆盖整个屏幕高度。

对于 iframe 调整大小，请参见此处。

于 2009-07-24T07:43:13.437 回答
-3

您是否尝试过使用 CSS 方法设置高度属性：

$("#ID OF YOUR TAB ELEMENT").css("height","100%");
于 2009-07-24T07:41:55.313 回答