我想要的背景容器，它是内容div的兄弟div来拉伸填充容器。背景容器包含将背景分成块的div。
背景和容器div具有100％的宽度，内容容器没有。
HTML：
<div id="container">
<div id="content">
Some long content here ..
</div>
<div id="backgroundContainer">
<div id="someDivToShowABackground"/>
<div id="someDivToShowAnotherBackground"/>
</div>
</div>
CSS：
#container {
height:auto;
width:100%;
}
#content {
height: auto;
width:500px;
margin-left:auto;
margin-right:auto;
}
#backgroundContainer {
height:100%;??? I want this to be the same height as container,but 100% makes it the height of the viewport.
}
解决方法
同样高度的列的解决方案是CSS Tabular Display Technique，意味着使用display：table功能。
它适用于Firefox 2，Safari 3，Opera 9和IE8。
HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
即使表格单元的宽度的自动扩展有问题，也可以通过插入另一个带有表格单元并赋予其固定宽度的div来容易地解决。无论如何，宽度的过度扩展发生在使用极长的单词(我怀疑任何人会使用，比方说，600px长字)或一些div的宽度大于table-cell的宽度的情况下。
Faux Column Technique是最常用的解决这个问题的解决方案，但它有一些缺点，如果你要调整背景平铺图像的大小，如果你想调整列的大小，它也不是一个优雅的解决方案。
OneTrueLayout Technique包括创建一个极大的高度的填充底部，并通过应用具有相同巨大值的负边距底部，将真实边框位置带到“正常逻辑位置”，并隐藏由padding with overflow：hidden应用于内容wraper。一个简化的例子是：
HTML文件：
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
分层技术必须是一个非常整洁的解决方案，涉及绝对定位的div与一个主要的相对定位封装器div。它基本上由多个子div和主div组成。主div具有强制位置：相对于它的css属性集合。这个div的孩子都是绝对的位置：绝对的。子项必须将顶部和底部设置为0，并将左右尺寸设置为相互容纳列。例如，如果我们有两个列，一个宽度为100px，另一个为200px，考虑到我们想要左侧的100px和右侧的200px，左列必须有{left：0;右：200px}和右列{left：100px; right：0;}
