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

Question

我正在努力与客户项目.我所有的div■找没有绝对定位,height:100%对html,body和容器div秒,但静态内容差一点就其内容(在910px).

我可以将overflow属性更改为auto,并且背景将继续向下到内容的结尾,但它会添加一个滚动条,静态内容的下边框div保持在同一位置(910px).

更新:开发链接不再有效,所以我删除了它.可以说Animuson的彻底解释是这个线程的重要部分,并解决了容器不能扩展以匹配其内容的问题. - Ty

Answer 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;
}

自己浮动内容

如果这个绿色框的填充为20px(用于可见性),请注意向左浮动的单个红色框将如何扩展到其父框的边界.这是因为浮动内容实际上不占用视觉区域中的任何"空间".所有其他元素将在其下方展开,只有文本会围绕它.

清除父母中的浮动内容

为了解决这个问题并使绿色框完全包含其子红色框的区域,我们可以添加overflow: hidden其样式.这将把盒子向下扩展得足够远.

将父母扩展到100%的高度

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

使用最小高度代替

由于我们希望它扩展到至少 100%的高度,我们可以使用该min-height属性强制它,并仍然保持所需的"自动"高度,使父绿框完全包含子红框,让它推过仅在需要时才100%.

你是如何建立的

默认情况下,所有元素都设置为,overflow: visible以便属性不会真正改变任何内容.你和我提供的第一个例子之间的唯一区别是你height: 100%在元素上有一个集合.因此,父母正在扩大到100%的高度,但仍未包含其儿童红色框的整个高度.