フレックスサイドバー：高さの100％まで成長する方法

Question

CSSフレックスを使用してサイドバーを構築していますが、画面の垂直方向の高さ全体を満たすために垂直に伸びる必要があります。ここに私がやっていることの骨格があります。

JSFiddle here

.app { 
    display: flex; 
    flex-direction: row; 
    . align-items: flex-start; 
    height: 100%; 
    width: 100%; 
} 

.sidebar { 
    background-color: red; 
    height: 100%; 
} 

.content { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.content-header { 
    flex: 1; 
    background-color: grey; 
} 

.content-main { 
    flex: 1; 
    background-color: yellow; 
} 

<div class='app'> 
    <div class='sidebar'> 
    This is sidebar 
    </div> 
    <div class='content'> 
    <div class='content-header'> 
     Content Header 
    </div> 
    <div class='content-main'> 
     This is the main content 
    </div> 
    </div> 
</div> 

Answer 1

ませんでした完全なビューポートの高さをコンテナに割り当て、次にを子要素.contentから削除して閉じます。

.app { 
 
    display: flex; 
 
    flex-direction: row; 
 
    . align-items: flex-start; 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 

 
.sidebar { 
 
    background-color: red; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.content-header { 
 
    background-color: grey; 
 
} 
 

 
.content-main { 
 
    background-color: yellow; 
 
}

<div class='app'> 
 
    <div class='sidebar'> 
 
    This is sidebar 
 
    </div> 
 
    <div class='content'> 
 
    <div class='content-header'> 
 
     Content Header 
 
    </div> 
 
    <div class='content-main'> 
 
     This is the main content 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

body, html { 
    height: 100%; 
} 

とフィドル親コンテナの https://jsfiddle.net/gxkezny9/

一つは、私はそれをプレタポルテを得たと考え、100％の高さ

Answer 3

フレキシボックスの適切な使用、appはheight: 100vhを使用のいずれかによって完全な高さを取る作る、またはHTML /ボディ身長、html, body { height: 100%}そうappの高さを与えることです期待どおりに動作します。

第2に、align-items: flex-startを使用すると、すべての項目が最初に一番上に揃えられますが、sidebarにはalign-self: stretchを追加すると、親の高さになります。

フレックスローの項目では、height: 100%を使用しないでください。align-*プロパティを使用する必要があります。

注2親contentが彼らの合計の高さよりも高い高さを持っていない限り、content-headerとcontent-mainのセットflex: 1は、いずれかが影響を与えていません。注3

stretchにappのalign-itemsを変更する場合（および場合、sidebar上align-selfを除去することができる）

すなわち、flex: 1は、IEで正しく動作しません代わりにflex-grow: 1を使用するか、またはすべての値を割り当てますここで、flex-basisすなわちflex: 1 1 auto

スタックは、スニペット、autoあるべき

body { 
 
    margin: 0; 
 
} 
 
.app { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: flex-start; 
 
    height: 100vh;     /* changed */ 
 
    width: 100%; 
 
} 
 

 
.sidebar { 
 
    background-color: red; 
 
    align-self: stretch;   /* added */ 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.content-header { 
 
    flex: 1;      /* for IE, "flex-grow: 1" or "flex: 1 1 auto" 
 
*/ 
 
    background-color: grey; 
 
} 
 

 
.content-main { 
 
    flex: 1;      /* for IE, "flex-grow: 1" or "flex: 1 1 auto" 
 
*/ 
 
    background-color: yellow; 
 
}

<div class='app'> 
 
    <div class='sidebar'> 
 
    This is sidebar 
 
    </div> 
 
    <div class='content'> 
 
    <div class='content-header'> 
 
     Content Header 
 
    </div> 
 
    <div class='content-main'> 
 
     This is the main content 
 
    </div> 
 
    </div> 
 
</div>