垂直扩展 div 的内容直到布局中其容器末尾的一些 CSS 问题

Question

我正在从 psd 文件开始创建 HTML\CSS 表格布局，但我遇到了一个小问题。

这是我将获得的最终结果：

这是我的 HTML\CSS 结果：http://onofri.org/example/WebTemplate/

如您所见，我的左侧边栏有一些问题，因为最后一个蓝色框（#c div）没有垂直延伸到 #container div 的末尾strong> 与页脚背景图片不匹配。

我找到的pnly“解决方案”（但这不是正确的解决方案）是增加我的侧边栏**#c div的min-height*属性的值.例如，如果我将这个值从原来的 234px 增加到 334px，它似乎工作得很好。

但这不是一个真正的解决方案，因为如果页面的内容变化量发生变化，这个问题会再次出现。

我该如何解决？我该怎么做才能将#c div 的高度延长到其容器的末尾

Tnx

安德烈亚

Answer 1

这是我有时会使用的一个小技巧：

您需要做的是在容器 div 中同时包含 #content 和 #sidebar div。你告诉容器 div 有一个“clearfix”类，它会拉伸到最高列的高度。然后，如果您想让每列的背景看起来像延伸了整个长度，您可以为容器 div 提供背景图像。

例如，像这样的 1 像素高的重复背景可能会起作用：http://i.stack.imgur.com/W84Xa.jpg

CSS：

.clearfix:after{
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;}

.clearfix{
display:inline-block;
}

html[xmls].clearfix{
display:block;
}

*html.clearfix{
height:1%;
}

#container{
width:770px;
}

#content{
width:542px;
float:left;
}

#sidebar{
width:228px;
float:left;
}

HTML：

<div id="container" class="clearfix" >

<div id="content">
Content Div Text
</div>

<div id="sidebar">
Sidebar Div Text
</div>

</div>