I have two divs : one containing a complex background, and one containing the content. They both have the same basic style :

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

This works fine, until (for example) the content happens to be longer than the window. In this case, the content overflows from the background (which doesn't stretch to contain it).开发者_JAVA技巧

How do I get the background to always be at least as tall as the content ? I have tried putting the content div inside the background div, or putting them both in a container - but it didn't change anything.

Edit - here is a simplified markup that illustrates my problem; note that this one has the content inside the background div, as this is more likely to work.

<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>

Edit - alright, here's what worked for me :

• put the content inside the background div
• added min-height:100%;height:100%; to the background div
• added position:relative; to the content

Thank you to everyone who helped.

Set #background as position: fixed that way, it will stick with the scroll.

However, isn't it a better solution to do something like this? :

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

OP stated it's not possible.

Another thing you could do, is to nest them, like so:

<div id=background>

    <div id=content>

    </div>

</div>

That way, you only absolute position #background and the content inside of #content will automatically stretch it by default, because it is normal behavior for nested divs.

You could use a little JS action to get this done:

<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>