如何为div创建动态高度

Question

是否有可能具有取决于其他div的大小的div高度？

这里是例子

<div id="wrapper" style="height:400px;background-color:green;"> 

    <div id="content1" style="height:auto;min-height:50%;background-color: limegreen;"> 
     Content 1 
    </div> 

    <div id="content2" style="min-height:20%;background-color:lightblue;"> 
     Content 2 
</div> 

<div id="content3" style="min-height:20%;background-color:blue;"> 
     Content 3 
</div> 

</div> 

你可以看到它也是在这里：http://jsfiddle.net/kXfsY/28/

可以看到，DIV包装不被别人的div重叠。 我想让div content1的高度至少为div封装的50％或更多，所以整个div封装将会重叠。 div内容2和3的大小将是动态的，取决于内部有多少物品。或者，也许div内容2或div内容3将是空的，那么将是很好，如果div div1将增加和div包装的全高度将被使用。

这可能吗？

谢谢

Answer 1

您可以display: table和display: table-row做到这一点。您可以删除#content2/#content3元素或将它们设为空标记。无论如何`＃content1元素将占用所有剩余的空间。

http://codepen.io/cimmanon/pen/pHAcJ

#wrapper { 
    height:400px; 
    background-color:green; 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 

#content1 { 
    min-height:50%; 
    background-color: limegreen; 
    display: table-row; 
} 

#content2, #content3 { 
    height:20%; 
    display: table-row; 
} 

#content2:empty, #content3:empty { 
    display: none; 
} 

#content2 { 
    background-color:lightblue; 
} 

#content3 { 
    background-color:blue; 
}