Css JQuery UI选项卡填充可用的垂直空间

jsfiddle：

我有jQueryUI标签，我想一直延伸到屏幕底部，然后在标签内滚动。因此，文档不会滚动，只会滚动选项卡

为了让面板滚动，我在该类上设置了

overflow-y:auto

。为了让它填满页面，我尝试了

height:100%

和

margin-bottom:0

，但没有成功。有什么建议吗

HTML:

CSS:

---

将CSS更改为：

.ui-tabs-panel {
    height: auto;
    overflow-y: auto;
}

---

您可以使用绝对定位。。。但这可能会变得草率，这取决于页面上的其他内容。包含的元素也必须是100%

html body { height: 100% }

.ui-tabs {
    position: absolute;
    top: 100px;
    bottom: 0px;   
}

.ui-tabs-panel {
    height: 100%;
    overflow-y: auto;
}​

---

那不行。右侧的滚动条位于包含元素上，而不是在面板中。我希望包含的元素不滚动.Nice。为了让它发挥作用，我对这些值做了一些修改。身高是90%#选项卡左侧、右侧和底部设置为0。ui选项卡面板高度为90%。看起来不错。

.ui-tabs-panel {
    height: 150px;
    overflow-y: auto;
}​

.ui-tabs-panel {
    height: auto;
    overflow-y: auto;
}

html body { height: 100% }

.ui-tabs {
    position: absolute;
    top: 100px;
    bottom: 0px;   
}

.ui-tabs-panel {
    height: 100%;
    overflow-y: auto;
}​