title: CSS: auto height on containing div, 100% height on background div inside containing div
body: <p>The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height).  </p>
  
  <p>I want the background container, which is a sibling div of the content div to stretch to fill the container.  The background container contains divs to break the background into chunks.</p>
  
  <p>The background and container divs have 100% width, the content container doesn't.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;  
      &lt;div id="content"&gt;  
          Some long content here ..  
      &lt;/div&gt;  
       &lt;div id="backgroundContainer"&gt;  
           &lt;div id="someDivToShowABackground"/&gt;  
           &lt;div id="someDivToShowAnotherBackground"/&gt;  
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      height:auto;
      width:100%;
  }
  
  #content {
      height: auto;
      width:500px;
      margin-left:auto;
      margin-right:auto;
  }
  
  #backgroundContainer {
      height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
  }
  </code></pre>