CSS：auto height on contains div,100％height on background div inside containing 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.
}

解决方法

这个问题有很多解决方案，包括OneTrueLayout技术，虚拟列技术，CSS表格显示技术，还有一个分层技术。

同样高度的列的解决方案是CSS Tabular Display Technique，意味着使用display：table功能。
它适用于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来容易地解决。无论如何，宽度的过度扩展发生在使用极长的单词(我怀疑任何人会使用，比方说，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;}

在我看来，在自动化高度容器中未实现的100％高度是一个主要缺点，W3C应考虑修改此属性。

其他资源：link1,link2,link3,link4,link5 (important)

原文地址：https://www.jb51.cc/css/221268.html

CSS：auto height on contains div,100％height on background div inside containing div

解决方法

相关推荐