div不包含其中的所有内容

Question

我有一个高度为100％的div和一个坚固的边框。当我有太多内容时，它会显示在div边界之外。

如何将div扩展到边框内所有内容的高度，而不仅仅是屏幕尺寸的100％？

高度：100％似乎是测量屏幕高度而不是内部的内容。

<style>
#container{
    height:100%;
    width:100px;
    border:1px solid black;
}
</style>
<div id="container">

link问题示例页

Answer 1

绝对定位的元素不会改变其容器的高度。您的farbartastic元素具有绝对定位，因此它将在不通知其容器高度要求的情况下进行布局。

Answer 2

使用难以捉摸的clearfix可以轻松解决这样的问题！首先，删除您对height:100%;的所有#container声明，不需要它们，并在CSS中尝试：

#container:before, #container:after {
  display: table;
  content: "";
  zoom: 1;
}

#container:after {
  clear: both;
}

Answer 3

您的浮动元素（在容器外飞行）有一些问题，因此，为了正确使用容器中的overflow:hidden

#container{
    width:100px;
    border:1px solid black;
    overflow: hidden;
}