包装器重新调整大小

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来手动计算和设置高度。