如何設置兒童事業部的高度根據父股利

Question

我有這樣的HTML：

<div id="container">  
    <div id="c1">  
    </div> 
    <div id="c2">  
    </div> 
</div> 

而且我有這樣的CSS代碼：

<style type="text/css"> 
html, body { 
    height: 100%; 
    } 
body { 
    margin: 0; 
    padding: 0; 
    } 
#container { 
    height: 100%; 
    background: #CCFFCC; 
    } 
#c2{ 
    background: #CC11CC; 
    min-height: 100%; 
} 
#c1{ 
    background: #CC44AA; 
    height: 50px; 
} 
</style> 

我想C2 div的高度爲擴大父div的％100減去c1的高度。因爲我不想滾動顯示在我的頁面中。我該怎麼做？

我該怎麼辦？

Answer 1

我發現像這樣的孤子，和它的作品：

http://jsfiddle.net/Us5Cn/

Answer 2

你必須在最頂端的元素的空間爲裕量添加到您的C2 DIV，並告訴瀏覽器width: autoM計算高度的其餘部分：

#c2{ 
    background: #CC11CC; 
    height: auto; 
    margin-top: 50px; /*equal to height of #c1*/ 
} 
#c1{ 
    background: #CC44AA; 
    height: 50px; 
} 

Here's an example。

這應該使其顯示爲您所期望的。 :)

---

Updated example：

#c1{ 
    background: #blue; 
    height: 50px; 
} 

#c2{ 
    background: #orange; 
    height: 100%; 
}