html - 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的，并且它里面有一个#child定位的relative，它似乎#container不在里面#page- 这意味着如果#container增长，高度#page没有变化，为什么？

Answer 1

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

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

Answer 2

凯文的回答揭示了（为什么不可能）自动调整的技巧。

对于定位，请注意，如果 #container 是absolute，并且您希望它引用 #page，那么 #page 应该是relative，absolute或者fixed，不是static（默认值）。

否则，定位将参考 HTML 元素/视口，即窗口的可见区域。

Answer 3

在 . 上设置overflow: auto（或任何其他有效值）container。

Answer 4

.container是一个 css 类（由 指示.），例如在 html 中它会是

<div class="container">

您正在使用 ID，在 css 中是

#container { .... }