包裝器重新調整大小

Question

我有一個包裝內包含內容的包裝以及包含內容的容器。包裝是真的在那裏讓所有的東西在我設定的範圍內保持一致，以及集中一切。我有我的容器根據其內部的內容自動重新調整大小，這沒有問題。但是，標題和容器周圍的包裝將不遵循相同的規則，並且看起來像1px的高度結束。請注意：下面的代碼將在頂部顯示由虛線白色邊框概述的包裝，它應該包含它包含的所有內容。

Here's the code to the website on jsFiddle.

任何幫助將不勝感激。我感覺好像我關閉了所有的浮標，我不明白爲什麼高度：auto;在包裝上不起作用，但也許有一些我錯過了。

Answer 1

height: auto對#wrapper不起作用，因爲其中的每個元素幾乎都有position: absolute。

position: absolute是做什麼用的？ http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

在絕對定位模型， 盒被明確地相對於 其包含塊的偏移量。 這是 完全從正常流程中刪除 （它對後面的 兄弟姐妹沒有影響）。一個絕對定位的 框中建立一個新的包含區塊 爲正常流量的兒童和 絕對（但不固定）定位 後代。 但是，絕對定位元素 的內容 不會在任何其他框中流動。

的選擇，以解決您的問題：

• 給#wrapper明確height - 但是如果你不知道height事先將無法工作。
• As @jeroen說：使用JavaScript來設置height的#wrapper。
• 你應該真的做的就是徹底改變你的CSS：
  position: absolute不你應該在頁面上的每一個元素位置。您應該使用float。

對於使用position: absolute VS float s的比較，請參見：

http://www.htmldog.com/guides/cssadvanced/layout/

Answer 2

您正在使用絕對定位包裝的內容，#container，並將其完全從文檔流中取出。這同樣適用於您的標題的內容。

讓你的包裝包裝的唯一方法是使用javascript來手動計算和設置高度。