Javascript 如何使jQuery tabs（）100%高且内容可滚动

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

我已经有了部分解决方案，但我无法确定如何设置容器的100%高度和滚动

CSS:

}

看

使用CSS保持UI选项卡固定

位置：固定

.ui选项卡导航{
位置：固定；
宽度：100%；
}

然后使用jQuery为内容提供一个
页边空白顶部
，这样默认情况下它们将显示在UI选项卡下方

$（“#tab1”）.css（“页边距顶部，$（“.ui选项卡导航”）.height（））；
也许您已经解决了这个问题，但这里有一个解决方案，它的位置是：绝对的，对我们来说是有效的。可能是你的起点。
/斯塔凡

您可能需要
ul{position:fixed；}
来防止导航条消失。还有一个问题：内容的底部以这种方式不可见。100%个高度取页面的高度，但不考虑标签条的高度！非常感谢。这一类的作品，但内容背后的标签栏，看起来很奇怪。另外，滚动条与标签条重叠。我已经解决了这个问题，但是有几个选项确实很好。您可以添加一个JSFiddler链接吗？
<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>

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

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

    .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;
}