將元素延伸到垂直偏移屏幕底部

Question

我有一個簡單的佈局，我從MDN's flexbox page。它有一個標題和一個主要內容區域。

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

我想有主要內容的區域延伸到視口的底部或進一步，如果它需要適應它的孩子。我試着擺弄flexbox，但我仍然無法指定我希望它能夠垂直佔據所有空間，就像我可以水平放置一樣。

我能想到的只有兩個選項：

A）Javascript來計算所需的高度

B）對身體平鋪背景圖像，使其看起來好像內容領域擴展一路下降

任何人都可以想到填充視口的替代方法，並且如果孩子延伸到屏幕底部，還可以包含孩子嗎？

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

** **更新修正我我的jsfiddle與在article子元素更多的內容。內容將流出柔性容器。

Answer 1

#main 
{ 
    height: 100vh; 
} 

100vh意味着視高度的100％，你可以，如果你需要改變這個值。

Answer 2

Flexbox解決方案。

您必須將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

可以設置高度爲HTML的身體去填滿entitre窗口並使用從身體彎曲爲好。

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/