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

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

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

#container:after { 
    clear: both; 
} 

Answer 2

你有一些问题，你的浮动元素（这是飞在容器外），所以，对于正确的这种使用overflow:hidden容器

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

Answer 3

绝对定位的元素不会改变其容器的高度。您的远程元素具有绝对的定位，因此将在未通知其集装箱高度要求的情况下进行布置。