如何讓這個溢出div擴大來填充頁面高度？

Question

下面是去一半了一個例子： http://jsfiddle.net/gt9vz4qk/1/

CSS：#content {background-color: #fdd; overflow: auto; height: 70vh;}

HTML：使用相對大小單位

<button>Hello</button> 
<div id="content"> 
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> 
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> 
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> 
</div> 
<input> 

像vh幫助，但我覺得我失去了一些東西真的基本。正如你所看到的，如果你調整窗口或甚至jsfiddle網站上的分離器的大小，其他元素開始壓縮，第二個滾動條彈出。唯一的滾動條應該是溢出的。

另一種考慮這個問題的方式是我希望頂層元素佔用儘可能多的空間，底層元素需要儘可能多的空間，其他任何東西都應該被中心元素佔據。

Answer 1

這裏有一個flexbox解決方案：

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    background-color: #fdd; 
 
    overflow: auto; 
 
    flex: 1; 
 
}

<div> 
 
    <button>Hello</button> 
 
</div> 
 
<div id="content"> 
 
    A<br> 
 
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> 
 
</div> 
 
<div> 
 
    <input> 
 
</div> 

Fiddle