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

Question

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

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

这是我的 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”类，它会拉伸到最高列的高度。如果你想让每列的背景看起来像它延伸了整个长度，你可以给容器 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>