问题是，我有一个内容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.
}
答案 0 :(得分：40)
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 ...这不是＆＃39; t无论如何都可见。）
使用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 Technique ， Faux Columns Technique ， 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＆＃39 ; s的宽度大于表格单元格的宽度。
Faux Column Technique是此问题最常用的经典解决方案，但它有一些缺点，例如，如果要调整列的大小，则必须调整背景平铺图像的大小，这也不是一个优雅的解决方案
OneTrueLayout Technique包括创建一个极高的填充底部，并通过将真实边框位置置于＆＃34;正常逻辑位置＆＃34;来剪切它。通过应用相同巨大值的负 margin-bottom 并使用 overflow：hidden 隐藏填充所创建的范围应用于内容包装器。一个简化的例子是：
工作示例：
.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的孩子们都必须 位置：绝对 。孩子必须将 顶部 和 底部 设置为 0 和 左右 尺寸设置为相互适应列。例如，如果我们有两列，一个是宽度 100px ，另一个是 200px ，考虑到我们想要左侧的100px和 200px < / strong>在右侧，左栏必须有 {left：0;右：200px} 和右列 {left：100px;右：0;}
在我看来，自动高度容器中未实现的100％高度是一个主要缺点，W3C应该考虑修改这个属性（自2018年以来可以用Flexbox和Grid解决）。
其他资源： link1，link2，link3，link4，link5 (important)
答案 1 :(得分：9)
将#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
答案 2 :(得分：5)
好的，所以有人可能会打我这个答案，但我使用jQuery来解决所有烦人的问题，事实证明我今天只是用了一些东西来修复类似的问题。假设你使用jquery：
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
这是未经测试但我认为你可以在这里看到这个概念。基本上在加载之后，你可以获得高度（outerHeight包括padding + borders，innerHeight仅用于内容）。希望有所帮助。
以下是将其绑定到窗口调整大小事件的方法：
$(window).resize(function() {
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
答案 3 :(得分：3)
在某个地方你需要设置一个固定的高度，而不是在任何地方使用自动。你会发现，如果你在你的内容和/或容器上设置一个固定的高度，那么使用auto来处理它里面的东西就行了。
此外，即使你已经为它设置了一个高度，你的盒子仍会在高度方面展开更多的内容 - 所以不要担心：）
#container {
height:500px;
min-height:500px;
}
答案 4 :(得分：1)
如果您希望容器填满页面，则不必在任何时候设置height: 100%。有可能，你的问题根源在于你没有清除容器子中的浮子。有很多方法可以解决这个问题，主要是将overflow: hidden添加到容器中。
#container { overflow: hidden; }
应该足以解决你所遇到的任何高度问题。
答案 5 :(得分：1)
请注意，因为我很难用这个。
使用#container {overflow：hidden;我开始在Firefox和IE中出现布局问题的页面（当缩放进出时，内容会反弹进出父div）。
此问题的解决方案是添加一个display：inline-block;溢出的相同div：隐藏;
答案 6 :(得分：0)
我最终制作了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％
答案 7 :(得分：0)
尝试从样式元素中排除高度。
即。既不给予高度：100％也不给任何其他值。
答案 8 :(得分：0)
{
height:100vh;
width:100vw;
}