How To Set Height of Child Div According To Parent Div

I have a html like this:

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

And I have this css codes:

    <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开发者_C百科: #CC44AA;
    height: 50px;
}
</style>

I want c2 div's height to expand as %100 of parent div minus c1's height. Because I don't want scroll to be shown in my page. How can i do it?

How can i do it?

You have to add the space of the topmost element as a margin to your c2 div and tell the browser to calculate the rest of the height with width: autoM:

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

Here's an example.

This should make it display as you expect. :)

Updated example:

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

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

I found a soliton like that, and it works:

http://jsfiddle.net/Us5Cn/