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

不确定为什么要浮动其中一个div，只是在上使用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;
}

将父div高度和另一个子div的高度扩展为更大子div的高度

1 个答案: