你如何设置 jquery 选项卡以形成 100% 的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1176245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do you set the jquery tabs to form a 100% height?
提问by Nabab
how do you set the jquery tabs to form a 100% height?
你如何设置 jquery 选项卡以形成 100% 的高度？
i also need to resize the iframe within it to expand to 100% height.
我还需要调整其中的 iframe 的大小以扩展到 100% 的高度。
thank you!
谢谢你！
回答by Omiod
To resize the UI Tabs (latest 1.7.2 version, at least), it worked with the following code:
要调整 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();
}
Plus the flollowing css:
加上以下css：
#tabs {
display: inline-block;
width:325px;
}
You wil have to edit some numbers according to you needs.
您必须根据需要编辑一些数字。
回答by Nabab
If ever it can be of any use to someone else, I added some callbacks to "show" and "add" in order to always get a perfect height. In my case the top container has the class "ui-layout-pane" (as I use jquery layouts), but that should work with any class.
如果它对其他人有任何用处，我添加了一些回调来“显示”和“添加”，以便始终获得完美的高度。在我的情况下，顶部容器具有类“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);
}
});
回答by user142360
I don't think you can do it reliably (cross browser) with just css.
我认为你不能只用 css 可靠地（跨浏览器）做到这一点。
Maybe you should use jquery to get the height of the page and set each element like that:
也许你应该使用 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);
});
回答by kgiannakakis
回答by TheVillageIdiot
have you tried try setting height property using CSS method:
您是否尝试过使用 CSS 方法设置高度属性：
$("#ID OF YOUR TAB ELEMENT").css("height","100%");
