css - 将 min-height 设置为 100%，作为 min-height 为 100% 的容器的子级

Question

TL:博士；是否可以将 min-height:100% 的子级设置为 min-height:100%？

我的#body-container是一个全 Angular 容器，而我的.bg-container只是一个920px容器。

As pen
作为片段

html,
body {
  height: 100%;
  background-color: black;
}

#body-container {
  min-height: 100%;
  background-color: red;
}

.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}

<div id="body-container">
  
  <div class="bg-container">
    foo bar
  </div>
  
</div>

Answer 1

当然，只需将 height:100% 和 overflow:auto 添加到 #body-container 即可:

html,
body {
  height: 100%;
  background-color: black;
}
#body-container {
  height: 100%;
  min-height: 100%;
  overflow:auto;
  background-color: red;
}
.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}

<div id="body-container">

  <div class="bg-container">
    foo bar
  </div>

</div>