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

前端之家收集整理的这篇文章主要介绍了css – 以100%的高度扩展父容器以考虑浮动内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力与一个客户项目。我的所有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%的高度,但仍然不包括其孩子红盒子的全高。

原文链接:https://www.f2er.com/css/219318.html

猜你在找的CSS相关文章