12

パネルコンテンツを持つjQuery-UIのタブウィジェットを使用して、使用可能なスペース全体に拡張しようとしています。

これが私がこれまでに得たものの単純化されたバージョンです：http： //jsfiddle.net/MhEEH/3/

次のCSSを使用すると、＃tab-1の緑色のパネルコンテンツがパネルスペースだけでなく、ページ全体をカバーしていることがわかります。

 #tab-1 {
    background: green;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

「top：27px;」を使用できます それを修正するために、しかしこれは2つのことと衝突するでしょう：

  1. タブの「テーマ」を変更すると、高さ（27px）が変わる可能性があります
  2. タブがたくさんある場合は、最初の行の下に2番目の行があります。したがって、私のパネルコンテンツはこの2行目をカバーします...

クリーンで短い解決策で十分です。

JavaScriptは受け入れられますが、（クリーンな！）CSSのみのソリューションが望ましいでしょう...

-よろしく、

ステファン

4

10 に答える 10

17

独自の CSS を使用する代わりに、jQuery UI の組み込み機能を使用します。

var tabs = $("#tabs").tabs({heightStyle: "fill"});

APIドキュメントから：

高さスタイル

タイプ: 文字列

デフォルト: 「コンテンツ」

タブ ウィジェットと各パネルの高さを制御します。可能な値:

  • "auto": すべてのパネルが最も高いパネルの高さに設定されます。
  • "fill": タブの親の高さに基づいて、使用可能な高さに展開します。
  • "content": 各パネルはそのコンテンツと同じ高さになります。

単純な CSS ソリューションが非常に優れていることは確かですが、とにかくJavaScript を使用してタブ機能を構築しているため、既に持っているスクリプトの既存の機能を使用するのが最善です。

更新：

于 2013-03-15T03:00:55.823 に答える
3

タブをタブコンテナに入れてみましたが、次のスタイルで

#tab-container {position:relative; min-height:100%;}

そしてそれはうまくいくように見えました:

http://jsfiddle.net/MhEEH/8/

于 2013-02-11T14:26:40.517 に答える
2

これはあなたが求めているものですか？

http://jsfiddle.net/MhEEH/5/

html, body {
    height: 100%;   
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1 {
    background: green;
    height: 100%;
}
于 2013-02-11T14:21:17.093 に答える
2

私はこれを使おうとしました：

#tab-1 {
    background: green;
    position: relative;
    height:100%;
}

jsfiddleでは正常に動作します。あなたのページにどのように表示されるかわからない http://jsfiddle.net/MhEEH/7/

于 2013-02-11T14:23:16.673 に答える
2

最も単純な解決策、CSSの2つの変更、および問題の解決、#tabs{height:100%;}

と #tab-1{top:45px;}

これは行います:)更新されたフィドル

于 2013-03-18T12:44:16.317 に答える
2

ＯＰ、

この Fiddleを確認してください。

親#tabsにはoverflow: hidden;. 子供たちに加えて：#tabs div[id*=tab]設定していoverflow:autoます。これにより、親が境界を設定することが保証され、タブにオーバーフローしたコンテンツがある場合、スクロールバーの外観はタブ自体によって委任されます。

また、構文に慣れていない人のために説明すると#tabs div[id*=tab]、このワイルドカードは、「タブ」を含む任意の子divに一致します。これにはさまざまな方法がありますが、私は迅速なプロトタイピングのためにこの方法を選択しました。#tabsid

お役に立てれば。

于 2013-03-13T22:02:19.083 に答える
2

以下は私のCSSソリューションへのリンクです。

http://jsfiddle.net/MhEEH/17/

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tab-list {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1, #tab-2 {
    background: green;
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}

誰かが優れたソリューションである Coda スライダーについて言及しており、代わりに codrops のこのエラスティック コンテンツ スライダーを提案するかもしれません。

http://tympanus.net/codrops/2013/02/26/elastic-content-slider/

それが役に立てば幸い、

乾杯

于 2013-03-18T04:48:29.023 に答える
1

これはどうですか...これで、コンテンツがオーバーフローした場合にスクロールバーが完全に表示されます

http://jsfiddle.net/uHk5f/

<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until  the bottom of the page. But it shall -NOT- cover the tabs!</div>

これを使用して、クラスのスタイルを提供します

    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
     overflow:auto;
}

 #tabs .customPanel {
    background: green;

}

お役に立てれば！！！

于 2013-03-18T06:19:58.037 に答える
0

ここでは、基本的なスタイルの変更に JavaScript を使用する必要はないと思います。私は最近、単一ページの全画面表示スタイルのアプリを、JavaScript からポジショニングなどを使用して純粋な CSS にサイズ変更するすべてを行うことから変換しました。

今すぐ解決策に進みましょう - これを試してください。

http://jsfiddle.net/MhEEH/16/

#tab-1 {
    background: green;
    height: 100%;
}

親がスペースを埋めるため、緑色のボックス要素で絶対配置を使用する必要はありませんheight: 100%。あとは、残りのスペースを埋める必要があるだけです。

編集

このバージョンでは、コンテンツがスクロールしないという問題があるようです。これに対する修正を見つけるのに苦労しています。jQuery UI が div に一連のスタイルやものを追加しているように感じ#tab-1ます。これが問題を引き起こしている可能性があります。スタイルをリセットして、#tab-1何が残るかを確認してみる価値があるかもしれません。

于 2013-03-15T14:59:17.290 に答える
0

#tab-1 id に最上位の値を追加して、タブ自体の下にプッシュしました。

参照: http://jsfiddle.net/MhEEH/40/

関連する CSS は次のとおりです。

#tab-1 {
    background: green;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

それが役に立てば幸い！

于 2013-03-18T14:02:56.033 に答える