Question

所以我在一个网站上工作时，我遇到了我的页脚没有停留在容器div底部的问题（页脚不在容器内部，它放在HTML后面）。我意识到这是因为一些儿童div漂浮了，所以我不得不把溢出：auto放在容器上 - 但是，因为我需要孩子们有百分比高度，我的高度是100％，并且你可能知道溢出：自动+指定高度=滚动条。但是只有一个最小高度不会让孩子们达到他们的身高。两者当然都行不通。

我在一些单独的测试文件中重新创建了这个问题，摆脱了所有不必要的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的方法。如果它不能是百分比，那么我将调查灵活方框（如PiniH所述，谢谢！）。

Answer 1

这是一个老问题，没有真正好的答案，通常当事情变得像这样，你应该最后使用弹性框，min-height属性不会影响孩子，除非它是一个表，然后它得到一团糟。

您可以添加：

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

但是它不会增长，我想这就是为什么你首先使用了min-height。

我一直在讨论这个问题一段时间，最后我认为flex是这种情况下唯一的答案。

儿童divs不会对身高百分比做出反应

1 个答案: