CSS：包含div的自动高度，包含div的背景div的100％高度
问题在于，我有一个内容div，它在容器高度方向上拉伸（容器和内容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. }
这个问题有很多的解决scheme，包括OneTrueLayout技术 ， 人造列技术 ， CSS表格显示技术 ，还有一种分层技术 。
同样高度的列的解决scheme是CSS表格显示技术 ，这意味着使用display：tablefunction。 它适用于Firefox 2+ ， Safari 3 + ， Opera 9+和IE8 。
CSS表格显示的代码：
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并给出固定宽度来解决。 无论如何，宽度的过度扩展发生在使用非常长的单词（我怀疑任何人会使用a，比方说600px长的单词），或者某个div的宽度大于表格单元的宽度。
虚拟列技术是这个问题最stream行的解决scheme，但是它有一些缺点，例如，如果要调整列的大小，则必须调整背景平铺图像的大小，这也不是一个优雅的解决scheme。
OneTrueLayout技术包括创build极高的填充底部，并通过应用相同巨大值的负边界底部，将实际边界位置移动到“正常逻辑位置”，并将其隐藏带溢出的填充：隐藏应用于内容包装。 一个简单的例子是：
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>
分层技术必须是一个非常整洁的解决scheme，涉及div的绝对定位与主要的相对位置包装div。 它基本上由一些子div和主div组成。 主要div有势在必行的地位：相对于它的CSS属性集合。 这个div的孩子们都是绝对的地位 。 儿童必须将顶部和底部设置为0，并将左右尺寸设置为彼此容纳列。 例如，如果我们有两列，一列宽100px，另一列200px，考虑到我们希望左侧为100px，右侧为200px，左列必须为{left：0; 右：200px}和右列{left：100px; 右：0;}
在我看来，自动化高度容器内未实现的100％高度是一个主要的缺点，W3C应该考虑修改这个属性。
其他资源： link1 ， link2 ， link3 ， link4 ， link5（重要）
使#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来解决我所有的烦人的问题，事实certificate，我只是今天使用的东西来解决类似的问题。 假设你使用jQuery：
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
这是未经testing的，但我认为你可以在这里看到这个概念。 基本上加载后，你可以得到的高度（outerHeight包括填充+边界，innerHeight的内容只）。 希望有所帮助。
下面是你如何将它绑定到窗口大小调整事件：
$(window).resize(function() { $("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight()); });
某处你需要设置一个固定的高度，而不是在任何地方使用汽车。 你会发现，如果你设置一个固定的高度在你的内容和/或容器上，然后使用自动的东西里面的工作。
而且，即使你已经为它设置了一个高度，你的盒子仍然会在高度方面扩展更多的内容，所以不要担心:)
#container { height:500px; min-height:500px; }
如果您希望容器填充页面，则不必在任何时候设置height: 100% 。 机会是，你的问题是根源于你没有清除集装箱的孩子的花车。 解决这个问题的方法有很多，主要是在容器中joinoverflow: hidden 。
#container { overflow: hidden; }
应该足以解决你遇到的任何高度问题。
只是一个简短的说明，因为我很难与此。
通过使用#container {overflow：hidden; }我已经开始在Firefox和IE中有布局问题的页面（当缩放会进出内容会跳出和离开父div）。
解决这个问题的方法是添加一个display：inline-block; 与溢出相同的div：hidden;
我结束了2显示：表;
#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; }
