Comment définir la hauteur de l'enfant Div According To Parent Div

Question

j'ai un html comme ceci:

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

Et je ce code 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> 

Je veux la hauteur de c2 div dilatent % 100 de la taille du parent div moins c1. Parce que je ne veux pas que le défilement apparaisse sur ma page. Comment puis-je le faire?

Comment puis-je le faire?

Answer 1

Je trouve un soliton comme ça, et il fonctionne:

http://jsfiddle.net/Us5Cn/

Answer 2

Vous devez ajouter l'espace de l'élément le plus élevé en marge de votre c2 div et dire au navigateur pour calculer le reste de la hauteur avec width: autoM:

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

Here's an example.

Cela devrait l'afficher comme prévu. :)

---

Updated example:

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

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