webdevqa.jp.net

jQueryタブ:パネルは100%の高さのタブをカバーします

パネルコンテンツを持つ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のみのソリューションが望ましいでしょう...

-よろしく、

ステファン

12
SDwarfs

独自のCSSを使用する代わりに、jQueryUIの組み込み機能を使用してください。

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

APIドキュメント から:

heightStyle

タイプ:文字列

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

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

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

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


[〜#〜]更新[〜#〜]

  • 最も単純な完全な例については、 http://jsfiddle.net/MhEEH/45/ を参照してください。 CSS positionルールは必要ないことに注意してください。

  • 親のサイズ変更を監視するには、 http://benalman.com/projects/jquery-resize-plugin/ (または同様のもの)を使用する必要があります。ブラウザはデフォルトでウィンドウ自体に対して resize event のみを起動しますが、このプラグインはそのイベントのサポートをサイズ変更される任意の要素に拡張します。

16
Moshe Katz

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

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

そしてそれはうまくいったようでした:

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

3
Pete

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

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

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

2
AnilkaBobo

以下は私の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/

それが役に立てば幸い、

乾杯

2
Ady Ngom

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

および#tab-1{top:45px;}

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

2
MarmiK

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

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%;
}
2
Billy Moat

OP、

チェック このフィドル

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

また、構文#tabs div[id*=tab]に慣れていない人のために、このワイルドカードは、divに「tab」が含まれている#tabsの子idと一致します。これはいくつかの方法で実現できますが、私はラピッドプロトタイピングのためにこのルートを選択しました。

お役に立てれば。

2
couzzi

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

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;

}

お役に立てれば!!!

1
PSL

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

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

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

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

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

編集

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

0
rickh

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

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

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

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

それが役に立てば幸い!

0
Cynthia