我的问题是,当我有一个 tabs 元素的 heightStyle 设置为“fill”,并且该选项卡位于可调整大小的元素内时,当父级调整大小时,选项卡内容不会相应地调整大小。
代码非常简单:
$("#tabs").tabs({
heightStyle: 'fill'
});
$('#resize').resizable({
handles: 's'
});
CSS,p 是选项卡的内容:
body {
font-size:62.5%;
}
#tabs {
height:100%;
}
p {
background-color:yellow;
width:100%;
height:100%;
}
这是一个 fiddle ,显示了我的意思:http://jsfiddle.net/C27dF/1/
基本上,您可以看到选项卡容器的大小已调整,但内容未调整。
有人知道我如何让选项卡更新其内容的高度吗?
非常感谢。
最佳答案
您可以在可调整大小的函数中使用 alsoResize
参数,并将其设置为所有选项卡内容上的类。
类似这样的东西(我只是选择了一个由 ui 放置在选项卡上的任意类,以便 oyu 可以使用它或其他):
$('#resize').resizable({
handles: 's',
alsoResize: '.ui-tabs-panel'
});
关于JQuery-ui : tabs with heightstyle fill, 在可调整大小的面板中,选项卡内容高度未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17727852/