CSS-將孩子放在容器中

Question

我正在嘗試將兩個孩子裝進一個容器中，不要讓他們溢出。
這是我的問題的示例： https : //jsfiddle.net/195em81t/

我想要這樣，如果存在#footer ，它將占用20％的容器，而#content將填充其他80％的容器，並在必要時添加滾動條。

我不想在#content上設置80％的固定高度，因為有時#footer不會出現，在這種情況下，我希望#content占據100％的高度；

Answer 1

您可以使用flexbox。 通過使用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>