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%;   
}

Answer 2

我找到了这样的孤子，它起作用了：

http://jsfiddle.net/Us5Cn/

如何根据父母分区设定儿童分区的高度

2 个答案: