フレックスボックスをフルページの高さに伸ばすことができません

Question

フルページのレイアウトにフレックスボックスを使用しようとしていますが、メインエリアにテキストが不十分な場合は、私が期待していたページの残りのスペース。

私はalign-content: space-betweenのように振る舞いますが、私はしませんでした。私はここで間違って何をしていますか？任意の助け

body { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-content: stretch; 
 
    /* no effect here */ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 
body > #header-area { 
 
    flex: 1 1 auto; 
 
    order: 1; 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 
body > #menu-area { 
 
    flex: 0 0 180px; 
 
    order: 2; 
 
} 
 
body > #main-area { 
 
    flex: 1 1 auto; 
 
    order: 3; 
 
} 
 
body > #aside-area { 
 
    flex: 0 0 150px; 
 
    order: 4; 
 
} 
 
body > #footer-area { 
 
    flex: 1 1 auto; 
 
    order: 5; 
 
    width: 100%; 
 
    height: 100px; 
 
}

<div id="main-area" style="background-color: aqua"> 
 
    main area 
 
</div> 
 

 
<div id="menu-area" style="background-color: lavender"> 
 
    menu area 
 
</div> 
 

 
<div id="aside-area" style="background-color: lemonchiffon"> 
 
    sidebar area 
 
</div> 
 

 
<div id="header-area" style="background-color: lightsteelblue"> 
 
    header area 
 
</div> 
 

 
<div id="footer-area" style="background-color: lightskyblue"> 
 
    footer area 
 
</div>

ありがとう！

Answer 1

あなたは、私はあなたが `フレックス方向へ` body`を設定せずにこれを行うことはできません。この

html {height:100%;} /* add this */ 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100%; /* change this to min-height */ 
 
    width: 100%; 
 
    margin: 0; 
 
    padding:0; 
 
} 
 
body > #header-area { 
 
    /* flex: 1 1 auto; - not sure what this is for so I have removed it */ 
 
    order: 1; 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 
#menu-area { 
 
    flex: 0 0 180px; 
 
    order:1; 
 
} 
 
#main-area { 
 
    flex: 1 1 auto; 
 
    order:2; 
 
} 
 
#aside-area { 
 
    flex: 0 0 150px; 
 
    order:3; 
 
} 
 
body > #footer-area { 
 
    /* flex: 1 1 auto; - not sure what this is for so I have removed it */ 
 
    order: 3; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
#content { 
 
    flex-direction:row; 
 
    display:flex; 
 
    flex-grow:1; 
 
    order:2; 
 
}

<div id="content"> 
 
    <div id="main-area" style="background-color: aqua"> 
 
    main area 
 
    </div> 
 

 
    <div id="menu-area" style="background-color: lavender"> 
 
    menu area 
 
    </div> 
 

 
    <div id="aside-area" style="background-color: lemonchiffon"> 
 
    sidebar area 
 
    </div> 
 
</div> 
 

 
<div id="header-area" style="background-color: lightsteelblue"> 
 
    header area 
 
</div> 
 

 
<div id="footer-area" style="background-color: lightskyblue"> 
 
    footer area 
 
</div>