html - 将父 div 的高度和另一个子 div 的高度扩展到更大的子 div 的高度

Question

我的 asp.net 页面上有四个 div，div7_1(父)、div4_1 和 div11_1 以及 div6_1 作为子 div。情况是这样的:

html

<div id="div7_1">
   <div id="div4_1">                    
   </div>
   <div id="div11_1" runat="server">                    
   </div>
   <div id="div6_1">
   </div>               
</div>

CSS

#div4_1{display:table-cell; width:215px; min-height: 450px; top: 0px; float: left; background-color: #cc9933; text-align: center; border: 2px solid #999;}
#div6_1{display:table-cell; width: 185px; min-height: 450px; float: right; top: 0px; right: 0px; background-color: #cc9933; border: 1px solid #999;}
#div7_1{ position: relative; overflow: hidden; display: table; width: 1200px; min-height: 450px; top: 5px; left: 0px; padding-top: 0px;}
#div11_1{display:table-cell; float: left; padding-left: 5px; margin-left: 5px; width: 65%; min-height: 450px; top: 0px; left: 0px; border: 3px solid #999;}

我需要将父 div 的高度扩展到具有最大高度的子 div 的高度，并将其他子 div 扩展到该高度。我怎样才能做到这一点？可能我在 css 中有一些多余的行，请指正。

谢谢。

Answer 1

不确定为什么要 float 任何一个 div，但仅在 both 上使用 display:table-cell 似乎可以达到您声明的要求

JSfiddle

CSS

#div7{position: relative; 
    overflow: hidden; 
    display: table; 
    min-height: 450px; 
    top: 5px; 
    left: 0px; 
    padding-top: 0px;}
#div4{display:table-cell; 
    width: 245px; 
    background-color: #cc9933; 
    text-align: center;
    height:150px;
}

#div11{
    display: table-cell;
    position: relative;     
    padding-left: 5px; 
    margin-left: 5px; 
    width: 57%; 
    background-color: yellow;
}