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