扩展具有 100% 高度的父容器以考虑浮动内容答案

【问题标题】：Expanding the parent container with 100% height to account for floated content扩展具有 100% 高度的父容器以考虑浮动内容
【发布时间】：2012-02-25 18:49:39
【问题描述】：

我正在为一个客户项目而苦苦挣扎。我所有的divs 都没有绝对定位，height:100% 用于html、body 和容器divs，但静态内容在其内容不足（910 像素）处停止。

我可以把overflow属性改成auto，背景会一直向下到内容的末尾，但是会增加一个滚动条，静态内容div的下边框保持不变位置（910 像素）。

更新：开发链接不再有效，因此我将其删除。可以说，Animuson 的详尽解释是该线程的宝贵部分，并解决了容器无法扩展以匹配其内容的问题。 – 典型

【问题讨论】：

-1，“this”是一个断开的链接。
是的。这篇文章有两年半的历史了。
@TyMorton 没关系。它有超过 22,500 次的浏览量，对于任何阅读此页面的人来说几乎毫无用处。
我更新了帖子以反映开发链接不再有效的事实。但是，我不同意没有它的线程是无用的。 Animuson 的解释是真正的价值所在，并且不需要对问题进行可视化表示即可。

标签： css css-float

【解决方案1】：

您使用了错误的overflow-y 属性进行清除，您应该设置min-height 而不是常规高度。试试这个：

#static-content {
    background-color: #FFFFFF;
    margin: 0 auto;
    min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
    overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
    position: relative;
    width: 960px;
}

自行浮动内容

给定这个具有 20 像素内边距的绿色框（用于可见性），请注意浮动到左侧的单个红色框将如何扩展超出其父框的边界。这是因为浮动内容实际上并不占用可视区域中的任何“空间”。所有其他元素都会在它下面展开，只有 text 会环绕它。

清除父级中的浮动内容

为了解决这个问题并使绿色框完全包围其子红色框的区域，我们可以在其样式中添加overflow: hidden。这会将框向下展开足够远。

将父级扩展到 100% 高度

您可能认为仅添加height: 100% 是使其扩展到所需位置的最简单方法。但是，height 属性指定了绝对高度。由于浮动的内容实际上并不占用任何垂直空间，我们的overflow: hidden 属性将切断所有超出父级高度的内容。

改用最小高度

由于我们希望它扩展到至少 100% 的高度，我们可以使用min-height 属性将其强制到那里并且仍然保持使父级变为绿色所需的“自动”高度box 完全包围了红色子框，只有在需要时才让它超过 100%。

您是如何设置的

默认情况下，所有元素都设置为overflow: visible，因此该属性并没有真正改变任何东西。这与我提供的第一个示例之间的唯一区别是您在元素上设置了height: 100%。因此，父级扩展至 100% 高度，但仍未包含其子级红色框的全部高度。

【讨论】：

成功了！你能告诉我为什么它会这样工作吗——最小高度与高度？非常感谢！
由于您的内容是浮动的，隐藏溢出将强制框向下浮动内容下方（通常）。使用正常的高度属性，您说的是“这是高度”，因此框只会扩展到 100%，并隐藏其余的浮动内容。通过指定一个最小高度，它总是会扩展到 100%，但如果需要也可以超过。
怎么能超过 100%？我明白你在说什么，但是告诉它让它 100% 的容器、容器 100% 的正文、正文 100% 的页面等并没有从从上到下。我总觉得我在那里缺少一些关键元素。
min-height 就是这样做的。您是在告诉它至少 100%，但不一定必须是100%。浮动内容不占用任何垂直空间，因此在框刚刚扩展到 100% 并停止之前，因为没有任何东西将其推得更远。
这个解决方案似乎很有效（就我而言），但我对解释感到困惑。为什么溢出：隐藏会导致父级扩展到浮动子级的高度？为什么最小高度甚至是必要的？似乎您只需溢出即可获得所需的结果：隐藏在父级上。

【解决方案2】：

如果由于某种原因必须使用溢出：可见，还有其他方法可以强制容器拉伸以包含所有浮动内容。您必须将元素与 clear:both 作为最后一个容器的元素。如果您忽略古代 IE (https://css-tricks.com/snippets/css/clear-fix/）：

.your-container:after {
  content: "";
  display: table;
  clear: both;
}

【讨论】：

【解决方案3】：

如果 height: 100% 不适合你，你可以试试 CSS3 中的 calc 函数：

/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);

如前所述，您可以尝试使用高度或最小高度。您还可以使用此 calc 函数进行其他计算，例如：

 height: -moz-calc(100% - 50px);

正如您可能猜到的，这有时非常有用。

【讨论】：

【解决方案4】：

height:100% 是随您手边的容器流动的内容的高度，没有考虑您的浮动内容，这就是为什么您的容器的高度会停止的原因。删除它并正确清除您的容器以清除其中的浮动元素，它将起作用：

#static-content:before, #static-content:aftr {
 display:table;
 content:"";
}

#static-content:after {
 clear:both;
}

#static-content {
 zoom:1; /*ie fix*/
}

【讨论】：

【解决方案5】：

您在static-maincontent 中有一个float，它将它从文档内容的常规流中删除，因此static-content 不再关心它的高度，因此不会扩展到覆盖它。此外，为static-content 删除height:100%。

【讨论】：

浮动是必要的。否则，我必须绝对定位它们，这会在其他页面上产生一系列完全不同的问题。另外，我之后立即有一个 clearfix DIV。
在这种情况下，您需要手动设置父 div 的高度。
那也行不通。它是 CMS 模板的一部分，内容的数量每次都会有所不同。解决方案原来是隐藏溢出，并将高度更改为最小高度。

【解决方案6】：

阅读答案！！！-- 好的，所以我遇到了同样的问题，所需要的只是删除“定位”样式。应该工作得很好。

【讨论】：