包装重新调整大小

Question

我有一个包装内容包含内部内容的包装器以及包含内容的容器。包装器确实在那里，以便在我设置的范围内相应地保持一切相互定位，以及使所有内容居中。我有我的容器根据其内部的内容自动重新调整大小，这没有问题。但是，标题和容器周围的包装器将不遵循相同的规则，最终看起来高度为1px。请注意：下面的代码将显示顶部虚线白色边框勾勒出的包装，它应该包含它所包含的所有内容。

Here's the code to the website on jsFiddle.

非常感谢任何帮助。我觉得好像我关闭了所有的花车，我不明白为什么高度：自动;在包装器上不起作用，但也许有一些我缺少的东西。

Answer 1

您正在对包装器#container的内容使用绝对定位，并将其完全排除在文档流之外。这同样适用于标题的内容。

让包装器换行的唯一方法是使用javascript手动计算和设置高度。

Answer 2

height: auto上的

#wrapper无效，因为其中几乎所有元素都有position: absolute。

position: absolute做什么？ http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

  

在绝对定位模型中，a   框明确地相对偏移   到它的包含块。 是的   完全从正常流程中删除   （它对以后没有影响   兄弟姐妹）。绝对定位   框建立一个新的包含块   对于正常流动的儿童和   绝对（但不是固定）定位   后人。 然而，内容   一个绝对定位的元素   不要在任何其他方框周围流动。

解决问题的选择：

• 明确提出#wrapper height - 但如果您事先不知道height，则无效。
• 正如@jeroen所说：使用JavaScript设置height的{​​{1}}。
• 你真正所做的是完全重做你的CSS：
  #wrapper 不是您应该如何定位页面上的每个元素。您应该使用position: absolute代替。

有关使用float与position: absolute的比较，请参阅：

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