CSS：auto height on contains div，100％height on background div inside containing div [英] CSS: auto height on containing div, 100% height on background div inside containing div
问题描述
问题是，我有一个内容div它的容器高度（容器和内容div具有自动高度）。
我想要背景容器，它是内容div的同级div，以便填充容器。
背景和容器div有100％的宽度，内容容器没有。
HTML：
< div id =container>
< div id =content>
这里有一些长的内容..
< / div>
< div id =backgroundContainer>
< div id =someDivToShowABackground/>
< div id =someDivToShowAnotherBackground/>
< / div>
< / div>
CSS：
code> #container {
height：auto;
width：100％;
}
#content {
height：auto;
width：500px;
margin-left：auto;
margin-right：auto;
}
#backgroundContainer {
height：100％;？我想要这是与容器相同的高度，但100％使它的视口的高度。
}
对于此问题，包括 OneTrueLayout技术 ， 伪列技术 ， CSS表格显示技术 。
同样高度的解决方案的列是 CSS表格显示技术 表示使用 display：table 功能。
它适用于 Firefox 2 + ， Safari 3 + ， Opera 9+ 和 IE8 。 / p>
CSS表格显示的代码：
/ strong>
< div id =container>
< div id =rowWraperclass =row>
< div id =col1class =col>
第1列< br /> Lorem ipsum< br /&ipsum lorem
< / div>
< div id =col2class =col>
第2列< br /> Eco cologna duo est！
< / div>
< div id =col3class =col>
第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与table-cell并给它一个固定的宽度解决容易。无论如何，宽度的过度扩展发生在使用极长的单词（我怀疑任何人会使用，比方说，600px长字）或一些div的宽度大于table-cell的宽度的情况下。
虚假列技巧 是最常见的解决这个问题的解决方案，但它有一些缺点，如果你要调整背景平铺图像的大小调整列，它也不是一个优雅的解决方案。
OneTrueLayout技术 包括创建一个极大的高度，并通过应用相同巨大值的负边距底部并隐藏由填充产生的范围，将overflow：hidden应用于内容写入器，从而将实际边界位置带到正常逻辑位置，从而将其切除。简单示例如下：
< 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>第一个col< / div>
< div class =block floatLeft>
第二个栏位< br /> break line
< / div>
< div class =block floatLeft>第三个栏位< / div>
< / div>
< / body>
< / html>
分层技术必须是一个非常整洁的解决方案， div的主要相对定位包装器div。它基本上由多个子div和主div组成。主div具有强制性的 position：relative ，它是css属性集合。这个div的子元素都是位置：绝对。子元素必须将顶部和底部设置为 0 和左右另一个。例如，如果我们有两列，一个宽度为100px，另一个为200px，考虑到我们想要左侧的100px和右侧的200px，左列必须有 {left：0; right：200px} 和右栏 {left：100px; right：0;}
在我看来，在自动化高度容器中未实现的100％高度是一个主要缺点，W3C应考虑修改此属性。
其他资源： link1 ， link2 ， link3 ， link4 ， link5（重要）
The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height).
I want the background container, which is a sibling div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks.
The background and container divs have 100% width, the content container doesn't.
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.
}
There are a number of solutions for this problem, including OneTrueLayout Technique, Faux Columns Technique, CSS Tabular Display Technique and there is also a Layering Technique.
A solution for equally height-ed columns is the CSS Tabular Display Technique that means to use the display:table feature. It works for Firefox 2+, Safari 3+, Opera 9+ and IE8.
The code for the CSS Tabular Display:
The 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>
The 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>
Even if there is a problem with the auto-expanding of the width of the table-cell it can be resolved easy by inserting another div withing the table-cell and giving it a fixed width. Anyway, the over-expanding of the width happens in the case of using extremely long words (which I doubt anyone would use a, let's say, 600px long word) or some div's who's width is greater than the table-cell's width.
The Faux Column Technique is the most popular solution to this problem, but it has some drawbacks such as, you have to resize the background tiled image if you want to resize the columns and it is also not an elegant solution.
The OneTrueLayout Technique consists of creating a padding-bottom of an extreme big height and cut it out by bringing the real border position to the "normal logical position" by applying a negative margin-bottom of the same huge value and hiding the extent created by the padding with overflow:hidden applied to the content wraper. A simplified example would be:
The HTML file:
<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>
The Layering Technique must be a very neat solution that involves absolute positioning of div's withing a main relative positioned wrapper div. It basically consists of a number of child divs and the main div. The main div has imperatively position: relative to it's css attribute collection. The children of this div are all imperatively position:absolute. The children must have top and bottom set to 0 and left-right dimensions set to accommodate the columns with each another. For example if we have two columns, one of width 100px and the other one of 200px, considering that we want the 100px in the left side and the 200px in the right side, the left column must have {left:0; right:200px} and the right column {left:100px; right:0;}
In my opinion the unimplemented 100% height within an automated height container is a major drawback and the W3C should consider revising this attribute.
Other resources: link1, link2, link3, link4, link5 (important)
这篇关于CSS：auto height on contains div，100％height on background div inside containing div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
