html - 为什么子div的内容超出了父div？

所以我正在做一个网页设计：http://codepen.io/wostensen/pen/woxYgX

但是我无法终生理解为什么.articles不会留在.primary中。 overflow: hidden不能给我令人满意的结果，因为我希望用户能够阅读所有博客文章。 display: block对任何父元素甚至所讨论的元素都不执行任何操作。

我可以看到，在Debug Mode + Developer Tools中，.articles没有明显的原因在.primary之外流动。页脚应该是网页的结尾，而内容只是在其中流动。

我有什么想念的吗？

最佳答案

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

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

让容器决定高度应为多少，同时还要考虑其子容器

更新：

注意.primary（即.content）的容器也具有height: 100%。也从此处删除（或将其设为auto）。

关于html - 为什么子div的内容超出了父div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41100527/