CSS - 保持容器内的儿童

Question

我试图让两个孩子在容器内不会溢出。
这里是我的问题的例子：https://jsfiddle.net/195em81t/

我希望它这样，如果#footer出现时，它会采取容器的20％，#content将填补另外的80％，如果需要添加一个滚动条。

我不想设置#content硬80％的高度，有时#footer将不存在于欲#content这种情况下采取的高度的100％;

Answer 1

您可以使用flexbox。通过使用flex-grow属性，Flex项目可以增长以填充剩余空间。

.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>