我的内容和背景是具有绝对定位的div - 如何拉伸背景div以匹配内容的高度？

Question

我有两个div：一个包含复杂的背景，另一个包含内容。它们都具有相同的基本风格：

#content, #background
{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}

这很好，直到（例如）内容恰好比窗口长。在这种情况下，内容从后台溢出（不会拉伸以包含它）。

如何让背景始终至少与内容一样高？我已经尝试将内容div放在背景div中，或者将它们放在容器中 - 但它没有改变任何东西。

---

编辑 - 这是一个简化的标记，用于说明我的问题;请注意此内容包含背景div 中的内容，因为这更有可能奏效。

<style>

#background
{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}

#sky, #background-level-1, #background-level-2, #background-level-3
{
width:100%;
position:absolute;
left:0px;
}

#sky
{
top:0px;
height:100%;
background:#ccf;
z-index:10;
}

#background-level-1
{
bottom:0px;
height:100px;
background:#9c9;
z-index:103;
}
#background-level-2
{
bottom:100px;
height:50px;
background:#696;
z-index:102;
}
#background-level-3
{
bottom:150px;
height:25px;
background:#363;
z-index:101;
}

#content
{
width:400px;
height:1200px;
border:#990 solid 1px;
background:#ffc;
z-index:200;
position:absolute;
margin:64px;
padding:16px;
}

</style>

<div id="background">

    <div id="sky"></div>

    <div id="background-level-1"></div>
    <div id="background-level-2"></div>
    <div id="background-level-3"></div>

    <div id="content">
    I need this element to stretch its parent (the div #background).<br>
    The green divs contain pictures of hills and have a parallax effect applied to them through javascript.
    </div>

</div>

---

编辑 - 好的，这对我有用：

• 将内容放在背景div
中
• 将min-height:100%;height:100%;添加到后台div
• 将position:relative;添加到内容

感谢所有帮助过的人。

Answer 1

将#background设置为position: fixed，这样就会坚持滚动。

但是，做这样的事情不是更好的解决方案吗？ ：

#content {
   position:absolute;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   background: <WHATEVER BACKGROUND #background USED TO HAVE>
}

OP表示不可能。

---

你可以做的另一件事就是将它们嵌套，如下：

<div id=background>

    <div id=content>

    </div>

</div>

这样，您只有绝对位置#background，#content内的内容会默认自动拉伸，因为这是嵌套div的正常行为。

Answer 2

您可以使用一些JS动作来完成此任务：

<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function() {
// get the heights
b = $('#background').height();
c = $('#content').height();

// get maximum heights of all
h = Math.max(b, Math.max(c));

// apply it
$('#background').height(h);
$('#content').height(h);
});
</script>