Как установить высоту дочернего Div в соответствии с родительским Div

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>

Я хочу, чтобы высота div c2 увеличивалась как% 100 родительского div минус высота c1. Потому что я не хочу, чтобы свиток показывался на моей странице. Как мне это сделать?

Как я могу это сделать?

Answer 1

Вы должны добавить пространство самого верхнего элемента в качестве поля для вашего c2 div и сказать браузеру вычислить остальную часть высоты с помощью width: autoM:

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

Вот пример .

Это должно заставить его отображаться так, как вы ожидаете. :)

---

Обновлено Пример :

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

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

Answer 2

Я нашел такой солитон, и он работает:

http://jsfiddle.net/Us5Cn/