要素を垂直方向のオフセットで画面の下に拡張する

Question

私はMDN's flexbox pageから取った単純なレイアウトを持っています。ヘッダーとメインコンテンツエリアがあります。

<header>header</header> 
<div id='main'> 
    <article>article</article> 
    <aside>aside</aside> 
</div> 

私はメインのコンテンツ領域をビューポートの底部まで延長したい、またはそれが子供を収容する必要がある場合はさらに伸ばしたいと思います。私はフレックスボックスを使っていろいろ試してみましたが、私はそれが水平にできるように、すべてのスペースを垂直に取るように指定することはできません。

私は考えることができる唯一の2つのオプションがされています

A）Javascriptを必要な高さ

Bを計算するために）コンテンツ領域が拡張されているかのように見せかけるために、本体の上に背景画像をタイリングすべて下に行く

ビューポートをいっぱいにする代替案は誰も考えられますが、子供が画面の下部を越えている場合は子供も含みますか？

https://jsfiddle.net/1cpcsvjr/5/

**更新**私はarticleサブ要素でより多くのコンテンツと私のjsfiddleを改正しました。コンテンツがフレックスコンテナからブリードします。

Answer 1

#main 
{ 
    height: 100vh; 
} 

100vhは、ビューポートの高さの100％を意味し、あなたがする必要がある場合は、この値を変更することができます。

Answer 2

フレックスボックスソリューション。

html & body要素を100％の高さに設定する必要があります。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    font: 24px Helvetica; 
 
    background: #999999; 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#main { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    flex: 1; 
 
    background: pink; 
 
    display: flex; 
 
} 
 
#main > article { 
 
    margin: 4px; 
 
    padding: 5px; 
 
    border: 1px solid #cccc33; 
 
    background: #dddd88; 
 
    flex: 3 1 60%; 
 
    order: 2; 
 
} 
 
#main > nav { 
 
    margin: 4px; 
 
    padding: 5px; 
 
    border: 1px solid #8888bb; 
 
    background: #ccccff; 
 
    flex: 1 6 20%; 
 
    order: 1; 
 
} 
 
header { 
 
    display: block; 
 
    margin: 4px; 
 
    padding: 5px; 
 
    min-height: 100px; 
 
    border: 1px solid #eebb55; 
 
    border-radius: 7pt; 
 
    background: #ffeebb; 
 
}

<header>header</header> 
 
<div id='main'> 
 
    <article>article</article> 
 
    <aside>aside</aside> 
 
</div>

Answer 3

あなたはentitreウィンドウを記入し、同様に身体からフレックスを使用するために身体をHTMLに高さを設定することができます。

body { 
 
     font: 24px Helvetica; 
 
     background: #999999; 
 
     display:flex; 
 
     flex-flow: column; 
 
    } 
 
html, body { 
 
    height:100%; 
 
    margin:0; 
 
} 
 
    #main { 
 
     margin: 0px; 
 
     padding: 0px; 
 
     display: flex; 
 
     flex-flow: row; 
 
     flex:1;/* fills entire space avalaible (or share evenly if sibblings)*/ 
 
    } 
 

 
    #main > article { 
 
     margin: 4px; 
 
     padding: 5px; 
 
     border: 1px solid #cccc33; 
 
     background: #dddd88; 
 
     flex: 3 1 60%; 
 
     order: 2; 
 
    } 
 

 
    #main > nav { 
 
     margin: 4px; 
 
     padding: 5px; 
 
     border: 1px solid #8888bb; 
 
     background: #ccccff; 
 
     flex: 1 6 20%; 
 
     order: 1; 
 
    } 
 
    
 
    header { 
 
     display: block; 
 
     margin: 4px; 
 
     padding: 5px; 
 
     min-height: 100px; 
 
     border: 1px solid #eebb55; 
 
     border-radius: 7pt; 
 
     background: #ffeebb; 
 
    }

<header>header</header> 
 
    <div id='main'> 
 
     <article>article</article> 
 
     <aside>aside</aside> 
 
    </div>

https://jsfiddle.net/1cpcsvjr/2/