html - 子 div 不会响应百分比高度

Question

当我在一个网站上工作时遇到了我的页脚没有停留在容器 div 底部的问题(页脚不在容器内，它在 HTML 中被放置在它之后)。我意识到这是因为一些子 div 是 float 的，所以我不得不把 overflow:auto 放在容器上——但是，因为我需要 child 有百分比高度，我的高度是 100%，你可能知道overflow:auto + specified height = scrollbar。但是只有一个最小高度不允许 child div 获得他们的高度。两者兼而有之肯定行不通。

我在一些单独的测试文件中重现了该问题，删除了所有不必要的 CSS(尽管我确定仍有一些)，这样我就可以清晰地看到问题。 It's on this JSFiddle currently.我目前已将高度注释掉，因为理想情况下我不会使用它。

这是我的容器 div CSS:

  #container {
    position: relative;
    width: 70%;
    /*height:100%;*/
    min-height: 100%;
    overflow: auto;
    margin: 0 auto;
    background-color:#FFDA8A;
  }

还有一个需要百分比高度的子 div:

.featured {
  position: relative;
  width: 100%;
  height: 50%;
  background-color:red;
}

编辑:我想补充一点，我知道为什么会发生这种情况，而不是想知道是否有人偶然发现了一种仅使用 CSS 的方法来处理它。如果它不能是百分比，那么我将研究 flexbox (如 PiniH 所述，谢谢!)。

Answer 1

这是一个老问题，没有很好的答案，通常当事情变成这样时，你最后应该使用 flex 盒子，最小高度属性不会影响 child ，除非它是一个表格，然后它得到一团糟。

您可以添加:

 #container {
    position: relative;
    width: 70%;
    /*height:100%;*/
    min-height: 100%;
    height: 1px;
    overflow: auto;
    margin: 0 auto;
    background-color:#FFDA8A;
  }

但是它不会增长，我想这就是您首先使用最小高度的原因。

一段时间以来，我一直在思考这个问题，最终我认为 flex 是这种情况下唯一的答案。