title: My content and my background are divs with absolute positioning - how do I stretch the background div to match the height of the content?
body: <p>I have two divs : one containing a complex background, and one containing the content. They both have the same basic style :</p>
  
  <pre><code>#content, #background
  {
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  }
  </code></pre>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <hr>
  
  <p><strong>Edit</strong> - here is a simplified markup that illustrates my problem; note that <strong>this one has the content inside the background div</strong>, as this is more likely to work.</p>
  
  <pre><code>&lt;style&gt;
  
  #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;
  }
  
  &lt;/style&gt;
  
  &lt;div id="background"&gt;
  
      &lt;div id="sky"&gt;&lt;/div&gt;
  
      &lt;div id="background-level-1"&gt;&lt;/div&gt;
      &lt;div id="background-level-2"&gt;&lt;/div&gt;
      &lt;div id="background-level-3"&gt;&lt;/div&gt;
  
      &lt;div id="content"&gt;
      I need this element to stretch its parent (the div #background).&lt;br&gt;
      The green divs contain pictures of hills and have a parallax effect applied to them through javascript.
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h1><strong>Edit</strong> - alright, here's what worked for me :</h1>
  
  <ul>
  <li>put the content inside the background div</li>
  <li>added <code>min-height:100%;height:100%;</code> to the background div</li>
  <li>added <code>position:relative;</code> to the content</li>
  </ul>
  
  <p>Thank you to everyone who helped.</p>