title: How to make a DIV (SIDEBAR) extend to the end of a scrolled page?
body: <p>I'm trying to fit a sidebar to the end of the <strong>#SUBCONTAINER</strong> div. this is the HTML code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="subcontainer"&gt;
          &lt;div id="sidebar"&gt;
              &lt;div class="logo"&gt;
              &lt;img src="pictures/icon.png" alt="LOGO"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="pagecontainer"&gt;
              &lt;div class="page"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
      footer
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and this is the CSS I'm using right now:</p>
  
  <pre><code>html, body {
      background-color:#ffffff;
      margin:0 0 0 0;
      height:100%;
  }
  
  #container {
      position:relative;
      width:100%;
  }
  
  #subcontainer {
      position:relative;
      clear:both;
  }
  
  #sidebar {
      width:20%;
      float:left;
      background-color:#BD4538;
      color:white;
  }
      .logo {
          text-align:center;
          left:50%;
          right:50%;
          border-left:-8em;
          border-right:-8em;
      }
  
  #pagecontainer {
      width:80%;
      float:right;
      background-color:#FFFFFF;
      color:black;
  }
  
      .page {
          padding:1em 1em 1em 1em;
          background-color:#FFFFFF;
          color:black;
      }
  
  #footer {
      clear:both;
      height:10em;
      width:100%;
      bottom:0;
      background-color:#B82928;
      color:white;
  }
  
  p {
      margin: 0em 0em 0em 0em;
      text-align:justify;
      text-indent:1em;
  }
  </code></pre>
  
  <p>Unfortunatelly the <strong>SIDEBAR</strong> DIV does not extend to the end of the parent <strong>SUBCONTAINER</strong> container, so if I have a longer text in <strong>PAGECONTAINER</strong> DIV, I will see the white background of the parent <strong>BODY</strong> under the <strong>SIDEBARE</strong> DIV.</p>
  
  <p>I thought of a trick: if I change the background of the container <strong>PAGECONTAINER</strong> to the bgcolor of <strong>SIDEBAR</strong> I have what I want, but I'm working on a responsive website thus <strong>SIDEBAR</strong> need to change position and to go to the top of the pabe</p>
  
  <p>So, any suggestion?</p>