HTML/CSS：使包装器扩展以适应其子项的高度答案

【问题标题】：HTML/CSS: Make a wrapper extend to fit the height of its childrenHTML/CSS：使包装器扩展以适应其子项的高度
【发布时间】：2013-07-25 11:44:12
【问题描述】：

我正在做一个网站。所有内容都存储在包装器 DIV 中。内容 DIV 具有分配给它的边框样式。

我希望包装器 DIV 的高度足够高以适合其内容，因此边框会到达页面的末尾。

我认为默认情况下会发生这种情况，因为height:auto 是所有元素的默认值。

这是我的page。

感谢您提供的任何帮助。

【问题讨论】：

如果内容元素有position:fixed 怎么办？它们也应该被扭曲吗？
你的意思是：stackoverflow.com/questions/10155344/…？
@PeterRader。没有 position:fixed 不应该被包裹。 Joum：不，我只是想让我的包装器扩大高度以填充它的孩子。
如果 content-div 的大小固定，overflow:visible 或 hidden 内容过大怎么办？
@PeterRader 我只希望包装器 DIV 的高度与其内容一样大。如果 content-div 有 overflow:hidden，那么多余的内容将被隐藏，因此不会影响包装 DIV 的高度。如果 content-div 具有溢出：可见，则包装器 DIV 应扩展高度以适应该内容。

标签： html css

【解决方案1】：

只需制作包装器 div 样式

overflow: auto

【讨论】：

流程：自动不做任何事情。你的意思是溢出：自动 - 添加滚动条。（溢出：可见不做任何事情，溢出：隐藏隐藏内容）。
是的，我的意思是溢出。改变了它。它应该真正扩展到其子项的内容
这行得通，您只需要更改这两个值：#wrapper { overflow: auto or hidden; height: auto;}。更多信息在这里：stackoverflow.com/questions/11498946/…
@staono：我使用 before/after 在包装器后面添加背景。如果我使用溢出，则之前/之后的元素将被隐藏。我怎样才能让它们可见。

【解决方案2】：

html {
  height: 100%;
}

body {
  /* not height: 100%; otherwise you're 
   * fixing it to the height of the viewport 
   */
  min-height: 100%; 
}

.wrapper {
  /* some kind of clearfix is 
   * necessary because your content 
   * is floated
   */
  overflow: hidden;
}

【讨论】：

我试过了，但它只是隐藏了包装器之外的内容。
您需要将身体的“身高：100%”减掉。确保它是“最小高度”而不是“高度”。强制高度意味着正文永远不会与其中的内容高度相同，这就是您的溢出隐藏内容的原因。

【解决方案3】：

如果我理解正确的话，您想创建一个全高的网站吗？

如果是这样，请尝试sticky footer。

【讨论】：

我只是想让包装器的高度扩大到适合它的孩子。

【解决方案4】：

只需使用 div 来嵌套内容，并且“不要”给它任何高度。默认情况下，它将适合它的孩子。如有需要，您可以给display: block。

这是小提琴http://jsfiddle.net/8bP9b/

【讨论】：

我的建议：考虑重新设计您的页面布局。它将使其“稳定”和“更好”。
@blasteralfred Ψ：你能扩展你的 cmets。