如何使jQuery tabs()100%高和内容可滚动

时间:2013-03-21 17:23:30

标签: javascript jquery html css css-float

我正在尝试使用标签创建一个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>

jQuery tabs with scrolled content

3 个答案:

答案 0 :(得分:4)

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

CSS:

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

}

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

答案 1 :(得分: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;
}

答案 2 :(得分:1)

请参阅DEMO

使用CSS position:fixed保持UI标签的固定。

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

然后使用jQuery为内容提供margin-top,以便默认情况下它们会显示在UI标签下方。

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