jqueryタブを100％の高さに設定するにはどうすればよいですか？

Question

jqueryタブを100％の高さに設定するにはどうすればよいですか？

また、100％の高さに拡大するには、その内部のiframeのサイズを変更する必要があります。

ありがとうございました！

$("#ID OF YOUR TAB ELEMENT").css("height","100%"); 

Answer 1

を使用すると、CSS方式を使用して、高さプロパティを設定してみてくださいしようとしています。

iframeのサイズ変更については、hereを参照してください。

Answer 2

あなたは高さのdiv使用することができます：タブの内容は、画面全体の高さをカバーするために拡張する必要があり100％を

Answer 3

私はちょうど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); 
}); 

Answer 4

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(); 
} 

プラスflollowingのCSS：コード以下

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

あなたは、いくつかのnumbeを編集する必要がウィルあなたの必要に応じてrs。

Answer 5

他の人にもこれを使用できる場合は、常に完全な高さを得るために「表示」と「追加」にコールバックを追加しました。私の場合、一番上のコンテナは "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); 
    } 
});