html - CSS - 将 child 放在容器内

Question

我正在尝试将 2 个 child 放入一个容器中而不让他们溢出。
这是我的问题的示例: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>