html - 使多个嵌入的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 和具有 opacnav id 和 class well 的 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 指定一个高度，然后将高度设置为继承所有子 div 来完成。因此，您可以将其添加到父 div(使用 600px 和红色作为示例):

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

然后是 children :

.child-element {
  height:inherit;
 }

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

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