两个div在一起，第三个在后面

Question

我有这样的布局：

  <div id="content">
    <div id="foreground">
    </div>
    <div id="background">
    </div>
  </div>
  <div id="footer">
  </div>

我需要在前景div下显示背景div，这是我使用position:absolute完成的，它工作正常

问题是，在设置了前景和背景的绝对位置后，它们被从正常流中取出，父div（内容）并没有实际宽度，这会固定页脚的位置。

#background
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
#foreground
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
}
#content
{
    position:relative;
}
#footer
{
    position:relative;
}

内容宽度是动态的，所以我不能将绝对位置设置为页脚，我真的想避免一些javascript技巧，有什么解决方案吗？

Answer 1

我会这样做的：

HTML:

<div id="content">
    <div id="foreground">
        Row 1<br>
        Row 2<br>
        Row 3<br>
        Row 4
    </div>
    <div id="background">
    </div>
</div>
<div class="clear"></div>
<div id="footer">
    The footer
</div>

CSS:

#background
{
    float: left;
    background-color: #ff0;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    width: 100%;
    height: 100%;
    display: block;
}
#foreground
{
    float: left;
    z-index:1;
}
#content
{
    position:relative;
    border: 1px solid #f00;
    float: left;
    width: 100%;
}
#footer
{
    border: 1px solid #f0f;
    position:relative;
    width: 100%;
}
.clear
{
    clear: both;
}

Fiddle：http://jsfiddle.net/4LSZK/

Answer 2

是否有原因不能在#content上设置高度？所以，像这样的东西：

#content {
    border: 1px solid red;
    position: relative;
    height: 200px;
}
#foreground {
    position: absolute;
    top: 50px;
    height: 100px;
    width: 100%;
    background: yellow;
    z-index: 2;
}
#background {
    position: absolute;
    height: 100px;
    width: 100%;
    background: red;
    z-index: 1;
}
#footer {
    border: 1px solid red;
}

这是一把小提琴：http://jsfiddle.net/DuWRe/1/

（我添加了一些边界和背景，这样每个元素的位置都可以很容易地识别。）