问题是，我有一个内容div，它在容器高度上伸展它的容器（容器和内容div有自动高度）。
我想要背景容器，它是内容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.
}
在2018年，许多浏览器都支持Flexbox和Grid，它们是非常强大的CSS显示模式，超过了传统方法，例如Faux Columns或Tabular Displays（将在本答案的后面部分进行处理）。
为了使用Grid实现这一点，只需在容器上指定display：grid和grid-template-columns即可。 grid-template-columns取决于你拥有的列数，在这个例子中我将使用3列，因此属性将显示：grid-template-columns：auto auto auto，这基本上意味着每个列都有自动宽度。
Grid的完整工作示例：
html, body {
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
padding: 20px;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="grid-item b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="grid-item c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>另一种方法是通过在列的容器上指定display：flex并为列提供相关宽度来使用Flexbox。在我将使用的示例中，有3列，你基本上需要在3中拆分100％，所以它是33.3333％（足够接近，谁关心0.00003333 ......无论如何都不可见）。
使用Flexbox的完整工作示例：
html, body {
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
}
.flex-column {
padding: 20px;
width: 33.3333%;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-column a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="flex-column b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="flex-column c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>自2017/2018以来，所有主流浏览器都支持Flexbox和Grid，caniuse.com也证实了这一点：Can I use grid，Can I use flex。
还有许多经典解决方案，在Flexbox和Grid时代之前使用，如OneTrueLayout技术，Faux Columns技术，CSS表格显示技术以及分层技术。
我不建议使用这些方法，因为它们具有hackish性质，并且在我看来并不那么优雅，但是出于学术原因很了解它们。
同样高度为列的解决方案是CSS Tabular Display Technique，它意味着使用display：table功能。它适用于Firefox 2 +，Safari 3 +，Opera 9+和IE8。
CSS表格显示的代码：
#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;
}<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>即使表格单元宽度的自动扩展存在问题，也可以通过插入具有表格单元格的另一个div并给予其固定宽度来轻松解决。无论如何，宽度的过度扩展发生在使用非常长的单词的情况下（我怀疑任何人都会使用a，比方说600px长的单词）或者某些div的宽度大于table-cell的宽度。
Faux Column Technique是这个问题最流行的经典解决方案，但它有一些缺点，例如，如果你想调整列的大小，你必须调整背景平铺图像的大小，它也不是一个优雅的解决方案。
OneTrueLayout Technique包括创建一个极高的填充底部，并通过应用相同巨大值的负边距底部并隐藏由此创建的范围将真实边框位置置于“正常逻辑位置”来剪切它。带溢出的填充：隐藏应用于内容包装器。一个简化的例子是：
工作范例：
.wraper {
overflow: hidden; /* This is important */
}
.floatLeft {
float: left;
}
.block {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30000px; /* This is important */
margin-bottom: -30000px; /* This is important */
width: 33.3333%;
box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<html>
<head>
<title>OneTrueLayout</title>
</head>
<body>
<div class="wraper">
<div class="block floatLeft a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p>
</div>
<div class="block floatLeft b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p>
</div>
<div class="block floatLeft c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p>
</div>
</div>
</body>
</html>分层技术必须是一个非常简洁的解决方案，涉及div的绝对定位，主要相对定位的包装div。它基本上由许多子div和主div组成。主要的div有必要的位置：相对于它的css属性集合。这个div的孩子们都是势在必行的位置：绝对的。孩子们必须将top和bottom设置为0，并将左右尺寸设置为彼此容纳列。例如，如果我们有两列，一个宽度为100px，另一个为200px，考虑到我们希望左侧为100px而右侧为200px，左列必须为{left：0;右：200px}和右栏{左：100px;右：0;}
在我看来，自动高度容器中未实现的100％高度是一个主要缺点，W3C应该考虑修改这个属性（自2018年以来可以用Flexbox和Grid解决）。
让#container到display:inline-block
#container {
height: auto;
width: 100%;
display: inline-block;
}
#content {
height: auto;
width: 500px;
margin-left: auto;
margin-right: auto;
}
#backgroundContainer {
height: 200px; /*200px is example, change to what you want*/
width: 100%;
}
另见：W3Schools
好的，所以有人可能会打我这个答案，但是我使用jQuery来解决所有烦人的问题，事实证明我今天只是使用了一些东西来修复类似的问题。假设你使用jquery：
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
这是未经测试的，但我认为你可以在这里看到这个概念。基本上在加载之后，你可以获得高度（outerHeight包括padding + borders，innerHeight仅用于内容）。希望有所帮助。
以下是将其绑定到window resize事件的方法：
$(window).resize(function() {
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
在某个地方你需要设置一个固定的高度，而不是在任何地方使用自动。你会发现，如果你在你的内容和/或容器上设置一个固定的高度，那么使用auto来处理它里面的东西就行了。
此外，即使你已经为它设置了一个高度，你的盒子仍然会在高度方面有更多内容，所以不要担心:)
#container {
height:500px;
min-height:500px;
}
如果您希望容器填满页面，则不必在任何时候设置height: 100%。有可能，你的问题根源在于你没有清除容器子中的浮子。有很多方法可以解决这个问题，主要是将overflow: hidden添加到容器中。
#container { overflow: hidden; }
应该足以解决你所遇到的任何高度问题。
只是一个快速的说明，因为我很难用这个。
使用#container {overflow：hidden;我开始在Firefox和IE中出现布局问题的页面（当缩放进出时，内容会反弹进出父div）。
这个问题的解决方案是添加一个display：inline-block;与溢出相同的div：隐藏;
我最终制作了2个显示器：table;
#container-tv { /* Tiled background */
display:table;
width:100%;
background-image: url(images/back.jpg);
background-repeat: repeat;
}
#container-body-background { /* center column but not 100% width */
display:table;
margin:0 auto;
background-image:url(images/middle-back.png);
background-repeat: repeat-y;
}
这使得它具有平铺的背景图像，其中间的背景图像为列。它延伸到100％的页面高度，而不仅仅是浏览器窗口大小的100％
尝试从样式元素中排除高度。
即既不给高度：100％也不给任何其他值。
{
height:100vh;
width:100vw;
}