web-dev-qa-db-ja.com

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のみのソリューションが望ましいでしょう...

-よろしく、

ステファン

jquerycssjquery-uitabsjquery-tabs
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