为什么孩子div的内容会脱离父div？

Question

所以我正在制作网页设计：http://codepen.io/wostensen/pen/woxYgX

但我无法理解为什么.articles会留在.primary中。 overflow: hidden没有给我一个满意的结果，因为我希望用户能够阅读所有博客帖子。 display: block对任何父元素甚至所讨论的元素都没有任何作用。

我可以在调试模式+开发者工具中看到.articles正在.primary之外流动，没有明显的原因。页脚应该是网页的最后一部分，内容只是流过它。

有什么我只是错过了吗？

Answer 1

在课程.primary中，不要给它height: 100%。将其更改为auto（甚至删除它）

.primary {
  padding: 1em 1.5em;
  background: white;
  width: 75%;
  margin: 0 auto;
  height: auto;
}

让容器决定将要考虑其子女的高度

<强>更新

注意到.primary（即。.content）的容器也有height: 100%。从这里删除（或使auto）。