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

我正忙于一个客户项目。我所有的

div

s都没有绝对位置，

html

、

body

和container

div

s的

height:100%

，但是静态内容停止了（在910px）

我可以将overflow属性更改为

auto

，背景将一直延续到内容的末尾，但它添加了一个滚动条，静态内容

div

的下边框保持在同一位置（910px）

---

更新：开发链接不再有效，所以我删除了它。可以说，Animuson的透彻解释是该线程的宝贵部分，并解决了容器无法扩展以匹配其内容的问题Ty

您在

静态maincontent

中有一个

浮动，它将其从文档内容的常规流程中删除，因此
静态内容
不再关心其高度，因此不会扩展以覆盖它。
此外，对于
静态内容，请删除
高度：100%
高度：100%
是随容器流动的内容的高度，并且不考虑浮动内容，因此容器的高度会缩短。移除它并正确清理容器，以清理其中的浮动元素，它将工作：

#静态内容：之前，#静态内容：之后{
显示：表格；
内容：“；
}
#静态内容：之后{
明确：两者皆有；
}
#静态内容{
缩放：1；/*ie修复*/
}
您使用了错误的
溢出-y
属性进行清除，您应该设置
最小高度，而不是常规高度。试试这个：

#静态内容{
背景色：#FFFFFF；
保证金：0自动；
最小高度：100%；/*设置为最小高度，这样溢出不会被隐藏*/
overflow-y:hidden；/*HIDE overflow；我知道，这没什么意义*/
位置：相对位置；
宽度：960px；
}

浮动内容本身
给定这个填充为20px（用于可见性）的绿色框，请注意左侧浮动的单个红色框将如何扩展超过其父框的边界。这是因为浮动内容实际上并不占用可视区域中的任何“空间”。所有其他元素将在其下方展开，并且只有文本将环绕它


清除父级中的浮动内容
为了解决这个问题并使绿色框完全覆盖其子红色框的区域，我们可以在其样式中添加
溢出：隐藏
。这将使长方体向下扩展足够远


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


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


你是怎么被陷害的
默认情况下，所有元素都设置为
overflow:visible
，这样属性就不会真正更改任何内容。这个示例与我提供的第一个示例之间的唯一区别是在元素上设置了
高度：100%
。因此，父对象扩展到100%的高度，但仍然没有包含其子对象红框的全部高度

如果height:100%不适合您，您可以从CSS3尝试此计算功能：

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

如前所述，您可以使用height或minheight进行尝试。您还可以使用此计算函数进行其他计算，如：

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

正如您可能猜到的，这有时非常有用。
如果出于某种原因必须使用overflow:visible，还有其他方法可以强制容器拉伸以包含所有浮动内容。您必须将带有clear:的元素作为最后一个容器的元素。如果你忽略了古老的IEs（阅读答案！！！--好吧，我也遇到了同样的问题，所需要做的就是删除“定位”样式。应该可以很好地工作。
这就成功了！你能告诉我为什么它是这样工作的吗？最小高度vs.高度？非常感谢！因为你的内容是浮动的，隐藏溢出将迫使框向下移动到浮动内容下方（通常）。使用“正常高度”属性，你会说“这是高度”因此，该框仅扩展到100%，并隐藏其余浮动内容。通过指定最小高度，它将始终扩展到100%，但如果需要，它将能够超过100%。它如何能够超过100%？我理解你的意思，但告诉它将其容器的100%变成100%，这似乎违反直觉对于主体，页面的主体100%等等，不会从上到下填充。我总是觉得我缺少了一些关键元素。这就是
min height
所做的。你告诉它至少是100%，但它不一定是100%。浮动内容不会占用任何垂直空间，所以在框扩展到他100%地停了下来，因为实际上没有什么能把它推得更远。这个解决方案似乎非常有效（就我的情况而言）但是我被这个解释弄糊涂了。为什么溢出：隐藏会导致父对象扩展到浮动子对象的高度？为什么最小高度是必需的？似乎你只需要溢出：隐藏在父对象上就可以得到想要的结果。浮动是必需的。否则，我就必须定位