フレックスボックス聖杯レイアウト：固定ヘッダー、左固定、流体コンテンツエリア、固定右サイドバー

フレックスボックスを使用して「聖杯」レイアウトを構築しようとしています。フレックスボックス聖杯レイアウト：固定ヘッダー、左固定、流体コンテンツエリア、固定右サイドバー

固定ヘッダ
固定、折りたたみ、スクロール左ナビゲーション
柔軟なコンテンツエリア
固定、折りたたみ、スクロール右NAVは

以下を参照してください：

ヘッダーの下にある「アプリ」領域の高さを除いて、すべて機能しています。今のところ100vh（ビューポートの高さの100％）ですが、これには64ピクセルのヘッダーが含まれています。

私はcalc（100vh - 64px）を試みましたが、flexでうまく動きません。

は、ここに私の基本的なHTML構造です：

<main> 
    <header></header> 
    <app> 
     <nav>Left Nav</nav> 
     <article>Content</article> 
     <aside>Right Nav</aside> 
    </app> 
</main>

とサポートCSS：

main { 
    display: flex; 
    flex-direction: column; 
} 

header { 
    z-index: 0; 
    flex: 0 0 64px; 
    display: flex; 
} 

app { 
    flex: 1 1 100vh; 
    display: flex; 
} 

nav { 
    flex: 0 0 256px; 
    order: 0; 
} 

article { 
    flex: 1 1 100px; 
    order: 1; 
} 

aside { 
    flex: 0 0 256px; 
    order: 2; 
}

- - - Full jsFiddle Here - - -

- - - Simplified jsFiddle Here - - -

出典

2015-11-04 Jon

FYIの場合、 'flex'タグはApache Flexで使用されます。 'flexbox'タグはCSSフレックスレイアウトを指します。 – Brian

@Brianヘッドアップありがとう！ – Jon

は<main>と<body>といくつかのCSSの競合があったが判明し、私がしなければならなかったすべては、ページ本体に直接フレックス定義を追加、<main>ラッパーを削除しました。

- - - Here's the full working jdFiddle - -から

- - - Here's the simplified jdFiddle - - -

新しいHTML構造：

<body> 
    <header></header> 
    <app> 
    <nav>Left Nav</nav> 
    <article></article> 
    <aside>Right Nav</aside> 
    </app> 
</body>

新しいサポートCSS：

html, body { 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
} 

body { 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
} 

header { 
    z-index: 0; 
    flex: 0 64px; 
    display: flex; 
} 

app { 
    flex: 1; 
    display: flex; 
} 

nav { 
    flex: 0 0 256px; 
    order: 0; 
} 

article { 
    flex: 1; 
    order: 1; 
    overflow: auto; 
} 

aside { 
    flex: 0 0 256px; 
    order: 2; 
}

あなたのアプリケーションの基礎としてこれを自由に使用してください！楽しい！

出典

2015-11-04 05:27:20 Jon

この回答は、現在のChrome（47）とSafari（9）でうまく機能しますが、Firefox（44）では正しく動作していないようです。これは、FFのフレックスボックスでコード化されたこのようなレイアウトで見られる繰り返しの問題のようです。フレックスを持つ単一のパネル（例ではnavパネルや記事パネル）の能力を尊重していないようです計算された高さとオーバーフローの設定。代わりに、ページ全体がスクロールします。 FFで正しく動作するようには見えません - おそらく一部のプレフィックスがありませんか？ –

共有いただきありがとうございます。意味的に正しいHTMLタグ「」を使用していますか？あるいは、本当に 'div id =" app ">'を代わりに使うべきですか？あるいは、AngularJsのようなフレームワークを使用していますか？ –

@ J.KyMarsh 'overflow：auto;'を 'app'セレクタに追加するだけで、固定ヘッダーもFFでも使えます。 – smajl

フレックスボックス聖杯レイアウト：固定ヘッダー、左固定、流体コンテンツエリア、固定右サイドバー

答えて

関連する問題