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

Expanding the parent container with 100% height to account for floated content

提问by Ty Morton

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).

我正在为一个客户项目而苦苦挣扎。我所有的divs 都没有绝对定位，height:100%for html、body和 container divs，但静态内容停止了它的内容（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 divstays in the same place (at 910px).

我可以将溢出属性更改为auto，背景将继续向下到内容的末尾，但它添加了一个滚动条，并且静态内容的底部边框div保持在同一位置（910px）。

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

更新：开发链接不再有效，所以我删除了它。可以说 Animuson 的详尽解释是该线程的宝贵部分，并解决了容器未扩展以匹配其内容的问题。– 泰

回答by animuson

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

您使用了错误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;
}

Floating Content by Itself

浮动内容本身

Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only textwill wrap around it.

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

Clearing Floated Content in the Parent

清除父级中的浮动内容

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

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

Expanding the Parent to 100% Height

将父级扩展到 100% 高度

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

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

Using a Minimum Height Instead

改为使用最小高度

Since we want it to expand to at leasta 100% height, we can use the min-heightproperty 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.

由于我们希望它至少扩展到100% 的高度，我们可以使用该min-height属性强制它到达那里，并且仍然保持使父绿色框完全包围子红色框所需的“自动”高度，让它推过去100% 仅在需要时。

How You Were Set Up

你是如何建立的

All elements, by default, are set to overflow: visibleso 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.

默认情况下，所有元素都设置为 ，overflow: visible因此该属性并没有真正改变任何东西。这个和我提供的第一个例子之间的唯一区别是你height: 100%在元素上有一个集合。因此，父级扩展到 100% 的高度，但仍未包含其子级红色框的整个高度。

回答by ?ukas? Fronczyk

If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):

如果由于某种原因必须使用溢出：可见，还有其他方法可以强制容器拉伸以包含所有浮动内容。您必须将元素与 clear:both 一起作为最后一个容器的元素。如果您忽略古老的 IE（<8），您可以使用非常简单的 css（参见https://css-tricks.com/snippets/css/clear-fix/）：

.your-container:after {
  content: "";
  display: table;
  clear: both;
}

回答by jsidera

If height: 100% doesn't work well for you, you can try this calc function from CSS3:

如果 height: 100% 不适合你，你可以试试 CSS3 中的这个 calc 函数：

/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);

You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:

如前所述，您可以使用 height 或 min-height 尝试此操作。您还可以使用此 calc 函数进行其他计算，例如：

 height: -moz-calc(100% - 50px);

And this is sometimes very useful, as you might guess.

正如您可能猜到的，这有时非常有用。

回答by Andres Ilich

height:100%is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:

height:100%是与您的容器一起流动的内容的高度，并且没有考虑您的浮动内容，因此这就是您的容器的高度停止的原因。删除它并正确清除您的容器以清除其中的浮动元素，它将起作用：

#static-content:before, #static-content:aftr {
 display:table;
 content:"";
}

#static-content:after {
 clear:both;
}

#static-content {
 zoom:1; /*ie fix*/
}

回答by Andres Ilich

READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.

阅读答案!!!-- 好的，所以我遇到了同样的问题，所需要的只是删除“定位”样式。应该工作得很好。

回答by Abhranil Das

You have a floatin static-maincontent, which removes it from the regular flow of the content of the document, and hence static-contentdoesn't care about its height any more, and so won't expand to cover it. Additionally, remove height:100%for static-content.

您有一个floatin static-maincontent，它将它从文档内容的常规流中删除，因此static-content不再关心它的高度，因此不会扩展以覆盖它。此外，删除height:100%for static-content。