CSS - 子供を容器の中に入れてください

Question

私は2人の子供をあふれさせることなく容器の中に収めようとしています。 https://jsfiddle.net/195em81t/

#footerが存在する場合、それは、コンテナの20％がかかりますし、#contentは、他の80％を記入し、必要に応じてスクロールバーが追加されますように、私はそれをしたい：
はここに私の問題の一例です。

私は#footerは私が#contentは、高さの100％を取るしたい場合には存在しません時々#content上のハード80％の高さを設定する必要はありません。

Answer 1

フレックスボックスを使用できます。 flex-growプロパティを使用すると、フレキシブルアイテムが成長して残りのスペースを埋めることができます。

.container { 
 
    height: 200px; 
 
    width: 100px; 
 
    border: 2px; 
 
    border-style: solid; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex: 80%; /* Start at 80%, then grow to fill remaining space */ 
 
    overflow: auto; /* In case contents are too tall */ 
 
} 
 
.footer { 
 
    flex: 20%; /* Start at 20%, then grow to fill remaining space */ 
 
    overflow: auto; /* In case contents are too tall */ 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> 
 
    </div> 
 
    <div class="footer"> 
 
    Footer 
 
    </div> 
 
</div> 
 
<hr /> 
 
<div class="container"> 
 
    <div class="content"> 
 
    Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> 
 
    </div> 
 
</div>