展开具有100％高度的父容器，以考虑浮动内容 [英] Expanding the parent container with 100% height to account for floated content

问题描述

我在与客户项目打交道。所有的 div 没有绝对定位， height：100％ for html ， body 和容器 div ，但静态内容（在910像素）。

I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).

我可以将overflow属性更改为 auto ，后台将继续向下结束，但它添加了一个滚动条，静态内容 div 的底部边框保持在相同的位置（在910px）。

I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).

更新：开发链接不再有效，因此我删除它。只需说Animuson的彻底的解释是这个线程的宝贵部分，并解决了容器不扩展到匹配其内容的问题。 - Ty

UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty

推荐答案

您使用了错误的 overflow-y 属性，您应该设置 min-height ，而不是常规高度。请尝试以下操作：

You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:

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

由Itself浮动内容

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

为了解决这个问题，使绿色框完全包含它的子红色框的区域，我们可以添加 overflow：hidden 到它的样式。

In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.

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

You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.

由于我们希望展开至至少 100％的高度，因此我们可以使用 min-height 属性强制它在那里，仍然保持自动高度，使父绿色框完全包含子红色框，让它超过100％

Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.

所有元素默认设置为 overflow：可见，所以属性没有真正改变任何东西。这个和我提供的第一个例子之间的唯一区别是，你在元素上设置了 height：100％。所以父级扩展到100％的高度，但仍然没有包含其子红色框的完整高度。

All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.

这篇关于展开具有100％高度的父容器，以考虑浮动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！