如何爲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; 
}