Question

我有这个html结构：

<div id="loggedin" class="container-fluid">      
    <div class="row-fluid">    
        <div class="span2">
            <div id="navigation">
                <div id="opacnav">
                    <div class="well">                         
                    </div>
                </div>
                <div id="opacnavbottom">
                </div>
            </div>
        </div>      
        <div class="span7">  
            <div id="opacmainuserblock">
                <div class="well">                   
                </div>
            </div>
        </div>        
        <div class="span3">             
            <div id="opacnavright">               
            </div>                
        </div>      
    </div> 
</div>

我希望div具有类row-fluid，span2，navigation和div，其id为opacnav，而class与其父div具有id登录的高度相同。我该怎么做？

Heres是我最初的css代码：

#loggedin > .row-fluid{
    display: flex;
    width: 100%;
    background: black;
}

#loggedin > .row-fluid > .span2{   
    align-items: stretch;   
    width: 23.076923076923077%;
    background: green;   
}

#loggedin > .row-fluid > .span2 > #navigation {      
    align-items: stretch;  
    background: blue;
}

#loggedin > .row-fluid > .span2 > #navigation > #opacnav{   
    align-items: stretch;  
    background: red;
}

#loggedin > .row-fluid > .span2 > #navigation > #opacnav > .well{   
    align-items: stretch;  
    background: yellow;
}

#loggedin > .row-fluid > .span7{
    align-items: stretch;
    width: 48.5%;
    background: orange;
}

#loggedin > .row-fluid > .span3{
    align-items: stretch;    
    background: pink;
}

屏幕上应填充黄色，橙色和粉红色。

Answer 1

如果我理解正确，你希望子div继承父div的高度。这可以通过给#loggedin的父div赋予高度，然后设置高度来继承所有子div来完成。因此，您可以将其添加到父div（使用600px和红色作为示例）：

#loggedin {
height:600px;
background-color:red;
}

然后对孩子们说：

.child-element {
  height:inherit;
 }

提供更新的小提示以显示所有颜色。有些人缺少宽度，这就是他们没有展示的原因。这些宽度只是样本：

http://jsfiddle.net/opr57w4b/3/

使多个嵌入div的高度与其父div的高度相同

1 个答案: