我正在努力与一个客户项目。我的所有div都没有绝对的定位,高度:html,body和container div的100%,而静态内容则停止其内容(910px)。
我可以将overflow属性更改为auto,背景将继续下降到内容的末尾,但它会添加一个滚动条,静态内容div的底部边框保持在相同的位置(以910px为单位)。
更新:开发链接不再有效,所以我删除它。只要说Animuson的彻底解释是这个线索的重要组成部分,解决了容器扩容问题,使其不符合内容。 – 泰
解决方法
您使用错误的overflow-y属性进行清除,您应该设置最小高度而不是常规高度。尝试这个:
#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(用于可见性),请注意左侧浮动的单个红色框将如何扩展到其父框的边界。这是因为浮动内容实际上并不占用视觉区域中的任何“空间”。所有其他元素都会在其下方展开,只有文本会包围它。
清除父母中的浮动内容
为了对付这个,使绿盒完全包含其孩子红色框的区域,我们可以添加溢出:隐藏到其风格。这将把盒子扩大到足够远。
将父母扩展到100%的高度
您可能会认为只要添加高度:100%是将其扩展到需要的最简单的方法。然而,height属性指定绝对高度。由于浮动的内容实际上并不占用任何垂直空间,所以我们的overflow:hidden属性将会切断超出父级高度的所有内容。
使用最小高度代替
由于我们希望将其扩展到至少100%的高度,所以我们可以使用min-height属性来强制它,并保持“父”绿框完全包含孩子红色框所需的“自动”高度,让它只有当它需要时,才能超过100%。
你如何设置
默认情况下,所有元素设置为overflow:visible,以使属性没有真正改变任何东西。这个和我提供的第一个例子之间唯一的区别是你有一个高度:100%设置在元素上。所以父母正在扩展到100%的高度,但仍然不包括其孩子红盒子的全高。