Html 如何根据父Div设置子Div的高度

我有这样一个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>

html，正文{
身高：100%；
}
身体{
保证金：0；
填充：0；
}
#容器{
身高：100%；
背景:#中交会;；
}
#c2{
背景:#CC11CC；
最小高度：100%；
}
#c1{
背景：#CC44AA；
高度：50px；
}

我希望c2 div的高度扩展为父div的%100减去c1的高度。因为我不想在我的页面中显示滚动。我怎么做

---

如何操作？

您必须将最顶部元素的空格作为边距添加到c2 div中，并告诉浏览器使用

宽度：autoM

：

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

这将使其按预期显示。：）

---

:

---

您必须将最顶部元素的空间作为边距添加到c2 div中，并告诉浏览器使用

width:autoM

：

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

这将使其按预期显示。：）

---

:

---

我发现了一个这样的孤子，它是有效的：

---

我发现了一个这样的孤子，它可以工作：

---

谢谢您的回复。在您的示例中，c2'根据其内容进行扩展。但我希望它有一个100%的窗口高度减去c1的高度，即使它是空的。不幸的是，这在Chrome中似乎不起作用。我发现实现跨浏览器动态高度的唯一方法是jQuery。我想我会用jQuery来实现。谢谢你的建议。谢谢你的回复。在您的示例中，c2'根据其内容进行扩展。但我希望它有一个100%的窗口高度减去c1的高度，即使它是空的。不幸的是，这在Chrome中似乎不起作用。我发现实现跨浏览器动态高度的唯一方法是jQuery。我想我会用jQuery来实现。谢谢你的建议。