title: Height of div element not matching parent's height when 100%
body: <p>I am trying to make a bootstrap layout with two panels with a navbar and a sticky footer.</p>
  
  <p>I want my sidebar to have a background color that goes all the way down. But when my right panel has more content, my left panel's background color does not go all the way to the bottom. I have my navbar and container placed inside a div tag and the container contains the right and left panel. I want the right and left panel to scroll together and do not want them to have their separate scroll bars. My code looks like this:</p>
  
  <pre><code>body, html, .row-offcanvas {
      height: 100%;
      overflow: auto;
  }
  body {
      padding-top: 50px;
  }
  #sidebar {
      height: 100%;
      min-width: 290px;
      max-width: 220px;
      background-color: #f5f5f5;
      float: left;
      position: relative;
  }
  #main {
      overflow-x: auto;
  }
  </code></pre>
  
  <p>Link to jsfiddle: <a href="http://jsfiddle.net/amirshadaab/ouqda63m/" rel="nofollow">http://jsfiddle.net/amirshadaab/ouqda63m/</a></p>
  
  <p>When m sidebar has a height of 100%, it does not take the height of the parent container but stops in the middle and when I get rid of the height: 100% from sidebar, my background for the side panel is only going till the content ends and not all the way down. Am I doing something wrong here?</p>