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

Question

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

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

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

如您所见，左侧边栏存在一些问题，因为最后一个蓝色框(#c div)没有垂直延伸到#container div 因此与页脚背景图像不匹配。

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

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

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

谢谢

安德里亚

Answer 1

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

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

例如，像这样的 1px 高重复背景可能有效: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>