html - 如何根据父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>

我希望 c2 div 的高度扩展为父 div 的 %100 减去 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;
}

Here's an example .

这应该使它按您预期的方式显示。 :)

---

Updated example :

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

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