javascript - 如何使 jQuery tabs() 100% 高且内容可滚动

Question

我正在尝试创建一个带有标签的 JS Web 应用程序。界面的特点是选项卡应该和窗口一样高，如果高于窗口，内容应该滚动。内容由填满屏幕的几个左浮动面板组成。

我已经有部分解决方案在工作，但我不知道如何设置100% 高度和容器的滚动。

http://jsfiddle.net/KhwZS/1242/

<div class="tabs">
<ul>
    <li><a href="#tab1">Tab1</a></li>
</ul>
<div id="tab1">
    <div class="container clearfix">
        <div class="floated"></div>
        <div class="floated"></div>
        <div class="floated"></div>
    </div>
</div>

Answer 1

http://jsfiddle.net/KhwZS/1245/

CSS：

    html, body {
    height: 100%;
}
.tabs {
height: 100%;

}

#tab1 {
    height: 100%;
    overflow: auto;
}

Answer 2

也许你已经解决了这个问题，但这里有一个 position: absolute 的解决方案，它对我们有用。可能是你的起点。/斯塔凡

    .tabs{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: 0px;
}


.ui-tabs .ui-tabs-nav {
position: absolute;
top: 0;
left: 0px;
height: 18px;
right: 0;
}


.ui-tabs-panel {
position: absolute;
top: 18px;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}

Answer 3

见演示。

使用 CSS 固定 UI 选项卡position:fixed。

.ui-tabs-nav {
    position: fixed;
    width: 100%;
}

然后使用 jQuery 给内容 amargin-top以便它们默认显示在 UI 选项卡下方。

$("#tab1").css("margin-top", $(".ui-tabs-nav").height());