绝对位置div没有填充容器div css

Question

我在容器div中有一个absolute positioned div。绝对定位div的背景颜色不会填充容器div。容器div的高度根据内容是动态的。如何使定位div的背景颜色填充它的容器div？

HTML：

<div class="container">
test<br />
test<br />
test<br />

<div class="showbg">
test
</div>

</div>

的CSS：

.container{ background-color:#CCCCCC;  width:300px;}
.showbg{ background-color:#FFFFFF; position:absolute; width:300px; margin-top:-65px; opacity:0.4;
filter:alpha(opacity=40);}

Answer 1

.container {position: relative;}
.showbg {position:absolute; top:0;bottom:0;left:0;right:0;}

Answer 2

写：

.container{position:relative;}
.showbg{height:100%;}

DEMO here.

Answer 3

编辑以下

的绝对div的样式

.showbg
{
    top:0;
    bottom:0
}

用于其他风格的绝对div。

Answer 4

在http://jsfiddle.net/pvr2Y/

上查看

.container {
    background-color:#CCCCCC;
    width:300px;
    position:relative;
}
.showbg {
    background-color:#FFFFFF;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.4;
    filter:alpha(opacity=40);
}