title: Force sidebar height 100% using CSS (with a sticky bottom image)?
body: <p>I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing.  I've searched online, but nothing I have found seems to work.  The HTML is: </p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="header"&gt;
      &lt;div id="bannerleft"&gt;
      &lt;/div&gt;
  
      &lt;div id="bannerright"&gt;
        &lt;div id="WebLinks"&gt;
          &lt;span&gt;Web Links:&lt;/span&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="Sidebar"&gt;
      &lt;div id="SidebarBottom"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="NavigationContainer"&gt;
      &lt;ul id="Navigation"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="Main"&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My full CSS is:</p>
  
  <pre><code>* {
    margin: 0px;
    padding: 0px;
  }
  
  body {
    font-family: Calibri, Sans-Serif;
    height: 100%;
  }
  
  #header {
    width: 100%;
    z-index: 1;
    height: 340px;
    background-image: url("../../Content/images/bannercenter.gif");
    background-repeat: repeat-x;
  }
  
  #header #bannerleft {
    float: left;
    background-image: url("../../Content/images/bannerleft.gif");
    background-repeat: no-repeat;
    height: 340px;
    width: 439px;
    z-index: 2;
  }
  
  #bannerright {
    float: right;
    background-image: url("../../Content/images/bannerright.gif");
    background-repeat: no-repeat;
    width: 382px;
    height: 340px;
    background-color: White;
    z-index: 2;
  }
  
  #Sidebar {
    width: 180px;
    background: url("../../Content/images/Sidebar.png") repeat-y;
    z-index: 2;
    height: 100%;
    position: absolute;
  }
  
  #SidebarBottom {
    margin-left: 33px;
    height: 100%;
    background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
  }
  
  #NavigationContainer {
    position: absolute;
    top: 350px;
    width: 100%;
    background-color: #bbc4c3;
    height: 29px;
    z-index: 1;
    left: 0px;
  }
  
  #Navigation {
    margin-left: 190px;
    font-family: Calibri, Sans-Serif;
  }
  
  #Navigation li {
    float: left;
    list-style: none;
    padding-right: 3%;
    padding-top: 6px;
    font-size: 100%;
  }
  
  #Navigation a:link, a:active, a:visited {
    color: #012235;
    text-decoration: none;
    font-weight: 500;
  }
  
  #Navigation a:hover {
    color: White;
  }
  
  #WebLinks {
    float: right;
    color: #00324b;
    margin-top: 50px;
    width: 375px;
  }
  
  #WebLinks span {
    float: left;
    margin-right: 7px;
    margin-left: 21px;
    font-size: 10pt;
    margin-top: 8px;
    font-family: Helvetica;
  }
  
  #WebLinks ul li {
    float: left;
    padding-right: 7px;
    list-style: none;
  }
  
  #WebLinks ul li a {
    text-decoration: none;
    font-size: 8pt;
    color: #00324b;
    font-weight: normal;
  }
  
  #WebLinks ul li a img {
    border-style: none;
  }
  
  #WebLinks ul li a:hover {
    color: #bcc5c4;
  }
  </code></pre>
  
  <p>I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.  </p>