6

タブ付きのJSWebアプリを作成しようとしています。インターフェイスの特徴は、タブがウィンドウと同じ高さである必要があり、コンテンツがウィンドウよりも高い場合はスクロールする必要があることです。コンテンツは、画面全体に表示されるいくつかの左側のフロートパネルから構成されています。

ソリューションの一部はすでに機能していますが、コンテナの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タブ

4

3 に答える 3

5

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

CSS：

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

}

#tab1 {
    height: 100%;
    overflow: auto;
}
于 2013-03-21T17:44:02.607 に答える
2

おそらくあなたはすでにこれを解決しているかもしれませんが、ここに位置のある解決策があります：絶対的、それは私たちのために働きます。あなたの出発点になるかもしれません。/スタッフ

    .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;
}
于 2013-07-08T13:36:22.783 に答える
1

DEMOを参照してください。

CSSを使用してUIタブを固定しますposition:fixed。

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

次に、jQueryを使用してコンテンツにを与え、margin-topデフォルトでUIタブの下に表示されるようにします。

$("#tab1").css("margin-top", $(".ui-tabs-nav").height());
于 2013-03-21T18:20:31.530 に答える