フルハイトの列とヘッダーのフレックスボックス

Question

フレックスボックスに新しくなりました。私の現在のレイアウトは、私が望んでいただけでなく、うまく機能していません - 私のコラムは、その中のコンテンツほどの高さです。

+----------------+ 
    | header   | 
    +-+--------------+ 
    |n|content  | 
    |v+--------------+ 
    +-+ 
    empty 
---------------------- 

私はflexboxがそれを解決することを望んでいます。私は既存のマークアップを改造する必要があります。

ページはフルサイズのヘッダーを含むフルスクリーン幅で、ページの残りの部分は流体幅のコンテンツで、固定幅のサイドバーです。

理想的には、2つのコンテンツ領域は、ページの下部（色付きの背景）に延長されていますが、折り返しを越えるだけです。内容がページより長い場合はスクロールします。

+----------------+ 
    | header   | 
    +-+--------------+ 
    |n| content  | 
    |a|    | 
    |v|    | 
--+-+--------------+-- 

私が分割そのうちの1つは、私は2つの行を作成する「コンテナ」、として、ページ全体を扱いますか？あるいは、サイドバーがある2番目の行でフレックスボックスのものを起動するだけですか？

flexboxが私のヘッダーの高さを知っているとすれば、それは前者でなければなりません。それ以外の場合、高さを100％に設定すると、ヘッダーに等しい額だけ折り返します。

フレックスボックスのドキュメントでは単純な例としてヘッダーと分割カラムが表示されませんでしたが、私は引き続き読んで実験します。

（もちろん、それはまた、より小さな画面サイズで、要素が狭い画面に収まるように、互いの下で包むように、応答するようになります。）

Answer 1

私は私はあなたの質問を理解してきました願っています。このアプローチは、あなたを始めるのに役立つかもしれません。それを分割するheaderと「休息」、およびその他の内部の「休息」を分割するものを - あなたは2 flexboxesを作成することができます

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    font-family: sans-serif; 
 
    color: white; 
 
} 
 

 
.container { 
 
    height: 100%; 
 
    background: grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
header { 
 
    height: 150px; 
 
    background: blue; 
 
} 
 

 
.content { 
 
    height: 100%; 
 
    display: flex; 
 
    background: green; 
 
} 
 

 
.sidebar { 
 
    background: #76c5ff; 
 
    width: 200px; 
 
} 
 

 
.main { 
 
    background: #ef3a59; 
 
    flex: 1; 
 
} 
 

 
@media (max-width: 600px) { 
 
    body { 
 
    height: initial; 
 
    } 
 
    .content { 
 
    height: initial; 
 
    } 
 
    .content { 
 
    flex-direction: column; 
 
    } 
 
    .sidebar { 
 
    width: 100%; 
 
    order: 2; /* remove this to keep sidebar above main content */ 
 
    } 
 
}

<div class="container"> 
 
    <header>header 
 
    </header> 
 
    <div class="content"> 
 
    <div class="sidebar">sidebar</div> 
 
    <div class="main">main content</div> 
 
    </div> 
 
</div>

Answer 2

...あなたが任意の具体的な質問がある場合は、私に教えてくださいnavとcontentになります。

here

Answer 3

を見ることができるようにまた、あなたがちょうどあなたが（は50pxとしてヘッダの高さを仮定）分の高さのためのCALCを使用することができ、MIN-高ヘッダの設定することができますについては

.content { 
    min-height: calc(100% - 50px); 
    min-height: -webkit-calc(100% - 50px); 
} 

固定幅のサイドバーは、成長または縮小することを防ぐ：

.sidebar { 
    flex-shrink: 0; 
    flex-grow: 0; 
} 

私は唯一のサイドバーやフレックスボックス内のコンテンツを置きます。サイドバーとコンテナのdiv内のコンテンツの両方を入れて、表示を割り当てる：コンテナに曲げる：

.container { 
    display: flex; 
    flex-direction: row; 
} 

ウィンドウ幅がある点に低下したときにあなたはおそらく崩壊やメディアクエリと流体になるためにあなたのサイドバーが必要になります。また、フレックスで作業するときは、複雑なので、this toolが役に立ちます。

Answer 4

私が上に得たすべてのフィードバックを集め、大きくhereから借りて、これは私が思い付いたものです。

<div class="page-body no-nav no-aside"> 
    <main> 
     <p>content</p> 
    </main> 
    <nav>nav</nav> 
    <aside>details</aside> 
</div> 

。

.wrapper { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    background-color: blue; 

    header { 
     height: 155px; 
    } 

    .page-body { 
     display: flex; 
     flex: 1; 
     background-color: lavender; 
     flex-direction: column; 
     min-height: calc(100vh - 155px); 
     min-height: -webkit-calc(100vh - 155px); 

     nav { 
      order: -1; 
      background-color: red; 
     } 

     aside { 
      background-color: orange; 
     } 

     &.no-nav nav, 
     &.no-aside aside { 
      display: none; 
     } 
    } 
} 

@media (min-width: 768px) { 

    .wrapper { 

     .page-body { 
      flex-direction: row; 
      flex: 1; 

      main { 
       flex: 1; 
      } 

      nav { 
       flex: 0 0 385px; 
      } 

      aside { 
       flex: 0 0 320px; 
      } 
     } 
    } 
} 

• ヘッダーが
• （上記の聖-杯の記事を参照してください）
• ページ-体は、必要に応じてフッターを追加する
• はかなり簡単ページの残りの部分を埋め、すべての列の固定の高さであります完全な高さ、コンテンツが流れない限りスクロールしない
• サイドバーは固定幅であり、コンテンツ本体は流体です。
• 構造が応答します
• 、必要に応じて、ページごとにサイドバーを表示/

を隠すために、いくつかの機能を追加した奇妙なこと、などの小さな画面に、このデフォルトは、大画面のためのオーバーライドメディアクエリーを有しています。 （通常は私がどこから来たか）