扩展具有100％高度的父容器以考虑浮动内容

Question

我正在努力与客户项目。我的所有div都没有绝对定位，height:100% html，body和容器div，但静态内容不足其内容（910px）。

我可以将溢出属性更改为auto，背景将继续到内容的末尾，但它会添加滚动条，以及静态内容div的下边框停留在同一个地方（910px）。

更新：开发链接不再有效，所以我删除了它。可以说Animuson的彻底解释是这个线程的重要部分，并解决了容器不能扩展以匹配其内容的问题。 - Ty

Answer 1

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

自行浮动内容

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

清除父级中的浮动内容

为了对抗此问题并使绿框完全包含其子红框的区域，我们可以在其样式中添加overflow: hidden。这会将盒子扩展得足够远。

将父级扩展到100％高度

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

使用最小高度

由于我们希望它扩展到至少 100％的高度，我们可以使用min-height属性强制它，并仍然保持所需的“自动”高度父绿箱完全包含儿童红盒子，只有在需要的时候才能超过100％。

你如何设置

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

Answer 2

如果身高：100％不适合你，你可以从CSS3尝试这个计算功能：

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

你可以尝试使用高度或最小高度，如前所述。您可以使用此calc函数进行其他计算，例如：

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

这有时非常有用，正如你猜测的那样。

Answer 3

如果你必须使用overflow：由于某种原因可见，还有其他方法可以强制容器伸展以包含所有浮动内容。你必须把元素清楚：作为最后一个容器的元素。如果您忽略古老的IE（＆lt; 8），您可以使用非常简单的css（视频https://css-tricks.com/snippets/css/clear-fix/）来实现：

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

Answer 4

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

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

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

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

Answer 5

float中有一个static-maincontent，会将其从文档内容的常规流中删除，因此static-content不再关心其高度了，所以不会扩大到覆盖它。 另外，删除height:100%的{​​{1}}。

Answer 6

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