Html 儿童divs赢得'；对高度百分比没有反应

因此，当我在一个网站上工作时，我遇到了一个问题，我的页脚没有停留在容器div的底部（页脚不在容器内，而是在HTML中放在它之后）。我意识到这是因为一些子div是浮动的，所以我必须在容器上放置overflow:auto——然而，因为我需要子div具有百分比高度，所以我将高度设置为100%，正如您可能知道的那样，overflow:auto+指定的高度=滚动条。但是只有一个最小高度不能让孩子们得到他们的高度。两者兼而有之肯定行不通

我在一些单独的测试文件中重新创建了这个问题，去掉了所有不必要的CSS（尽管我确信仍然有一些CSS），这样我就可以在没有混乱的情况下可视化问题。我现在已经注释掉了高度，因为理想情况下我不会使用它

以下是我的容器分区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唯一的处理方法。如果不能是百分比，那么我将研究弹性框（正如PiniH所提到的，谢谢！）。

这是一个老问题，没有真正好的答案，通常情况下，当东西变成这样时，你应该最终使用弹性框，最小高度属性不会影响孩子们，除非它是一张桌子，然后它会变得一团糟

您可以添加：

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

但是它不会增长，我想这就是为什么你首先使用最小高度

---

我一直在为这个问题绞尽脑汁，最终我认为flex是这个问题的唯一答案。

答案是因为属性的百分比值是其父属性的百分比。父级未设置高度，因此子级尝试为零高度的50%，并且50%/0=0。