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.jb51.cc/css/219318.html