CSS:auto height on contains div,100%height on background div inside containing div

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/221268.html

猜你在找的CSS相关文章