Question

我有2个div作为列，两个都向左浮动并设置为清除无。它们的容器div在顶部有一个背景图像，因此背景位于两列的顶部。

我希望能够在列的底部有一个背景图像。我创建了另一个div，它位于容器div内（但在列之外），并在底部设置了背景图像。

问题是这个div没有扩展到它包含的列的底部。我该怎么做呢？我试过玩漂浮物和清理，但没有任何运气。

由于

Answer 1

除了其他人已经提到的技术之外，您还可以将overflow:hidden添加到父容器的样式中。

这是一个众所周知的CSS怪癖：这是一个完整的处理：http://www.quirksmode.org/css/clearing.html

Answer 2

CSS：

div#test {
    min-height:100%;
    background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
    background-repeat: no-repeat;
    background-position: bottom;
}

div#wrapper {
    height: 500px;
}

HTML：

<div id="wrapper">
    <div id="test">Blalalalalala</div>
</div>

这样你就是div（#test）将拥有他父母的高度（#wrapper）。 http://jsfiddle.net/F95xN/6/ 尝试删除min-height: 100%;，您会看到。

Answer 3

浮点元素不计入非浮点元素的高度。您可以通过以下几种方式扩展容器div以包含这些浮动：

也将float: left添加到容器div中。
或者，将<div style="clear: both;"></div>之类的内容添加到容器div的末尾。
或者，使用更灵活的clearfix technique。

Answer 4

哎呀，我没有注意到，但是当我做线框时，id设置了其中一个容器的高度，并且忘了它在那里。移除高度并浮动右边的div为我修复了这个。

非常感谢。

当div内部的div向左浮动时，Div不会延伸到其内容的底部

4 个答案: