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

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>

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

这是我最初的 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 一个高度然后设置 height 以继承所有子 div 来完成。因此，您可以将其添加到父 div（以 600px 和红色为例）：

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

然后是孩子们：

.child-element {
  height:inherit;
 }

提供更新的小提琴以显示所有颜色。有些缺少宽度，这就是它们没有显示的原因。这些宽度只是示例：

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