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

我有这个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继承父div的高度。这可以通过为loggedin的父div指定一个高度，然后为所有子div设置继承高度来实现。因此，您可以使用600px和红色作为示例将其添加到父div：

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

然后是孩子们：

.child-element {
  height:inherit;
 }

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

---

我试着去做,但不管用。黄橙色和粉红色应该出现在屏幕上。看起来一些没有显示的div没有宽度。我添加了高度：继承和宽度：继承到这些：@Maitar->谢谢，但黄色、橙色和粉色只能填充屏幕，而不是全部。也许还需要调整一下。：->谢谢你给我一个主意。

.child-element {
  height:inherit;
 }