Div父div不包含子div

Question

我有这样的东西：

<div id="page">
  <---some content here -->
  <div id="container">
    <div id="child">
    </div>
  </div>
</div>

现在，#page中没有任何格式设置。它适用于some content，我的意思是，当内容更大时，#page也有更高的高度。但是，当我今天在其中应用#container时，它的位置是absolute，里面有一个定位为relative的#child，看起来#container不在#page中-这意味着即使#container增长，#page的高度也不会改变，为什么？

Answer 1

绝对定位的元素会从文档的正常流中移除，导致如果它们的高度增加，它们也不会增加其父元素的高度。

相对定位的

元素仍然被视为在文档中的正常元素流中。相反，绝对定位的元素会从流中取出，因此在放置其他元素时不会占用空间。

Answer 2

Kevin的回答揭示了(为什么不可能)自动调整大小的诀窍。

相反，为了定位，请注意，如果#container是absolute，并且您希望它引用#page，那么#page应该是relative、absolute或fixed，而不是static (默认)。

否则，定位将引用到HTML元素/视区，即窗口的可视区域。

Answer 3

在container上设置overflow: auto (或设置为任何其他有效值)。