title: Sidebar not going full height of page
body: <p>I have a side bar called column left. for some reason it does not go the full height of page when I have extra panels on view.</p>
  
  <p>I use bootstrap with it as well with a fixed navbar at top.</p>
  
  <p>Question: Why is it side bar "column left" not going full height what every page size is. What would be the best solution to solve it?</p>
  
  <p><strong>Codepen preview</strong></p>
  
  <p><strong>Code View</strong> <a href="http://codepen.io/riwakawebsitedesigns/pen/bdaGro/" rel="nofollow">http://codepen.io/riwakawebsitedesigns/pen/bdaGro/</a></p>
  
  <p><strong>Full View</strong> <a href="http://codepen.io/riwakawebsitedesigns/full/bdaGro/" rel="nofollow">http://codepen.io/riwakawebsitedesigns/full/bdaGro/</a></p>
  
  <pre><code>@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,vietnamese);
  
  /* Global */
  body {
      /*height: 100%;*/
      margin: 0;
      /*min-height: 100% !important;*/
      font-family: 'Open Sans', sans-serif;
      overflow-x: hidden;
      padding-top: 70px;
      width: 100%;
  }
  
  #user-bar-chart {
      height: 300px;
  }
  
  #client-bar-chart {
      height: 300px;
  }
  
  a,
  a:hover, 
  a:focus {
      cursor: pointer;
      text-decoration: none;
  }
  
  tr:hover a.dashboard-user:after {
      font-family: FontAwesome;
      content: "\f044";
      font-size: 14px;
  }
  
  /* fix for bootstrap hidden and visible */
  span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
      display: inline;
  }
  
  /* Layout  */
  
  .container-fluid {
      padding-left: 20px;
      padding-right: 20px;
  }
  
  #content {
      padding-bottom: 40px;
      transition: all 0.3s;
  }
  
  /* Column Left  */
  
  #column-left {
      width: 50px;
      min-height: 100% !important;
      background-color: #515151;
      position: absolute;
      top: 0px;
      padding-top: 100px;
      z-index: 10;
      transition: all 0.3s;
  }
  
  
  #column-left + #content {
      margin-left: 50px;
  }
  
  #column-left + #content + #footer {
      margin-left: 50px;
  }
  
  @media (max-width: 767px) {
      #column-left {
          overflow: hidden;
          display: none;
      }
  
      #column-left + #content {
          margin-left: 0;
      }
  
      #column-left + #content + #footer {
          margin-left: 0;
      }
  
  }
  
  /* Column Left Active */
  
  #column-left.active {
      width: 235px;
      display: block;
  }
  
  @media (min-width: 768px) {
  
  #column-left.active {
      overflow: auto;
  }
  
  #column-left.active + #content {
      margin-left: 235px;
  }
  
  #column-left.active + #content + #footer {
      margin-left: 235px;
  }
  
  }
  
  @media (max-width: 767px) {
  
      #column-left.active + #content {
          position: relative;
          left: 235px;
      }
  
      #column-left.active + #content + #footer {
          position: relative;
          left: 235px;
      }
  
  }
  
  #column-left.active {
      width: 235px;
  }
  
  #column-left.active #menu li i {
      font-size: 14px;
  }
  
  #column-left.active #menu &gt; li &gt; a &gt; span {
      display: inline;
  }
  
  #column-left.active #menu &gt; li &gt; ul {
      position: relative;
      left: auto;
      top: auto;
      width: auto;
      visibility: visible;
  }
  
  /* Top Navbar */
  
  .menu {
      background: #eeeeee none repeat scroll 0 0;
  }
  
  .navbar {
      background-color: #fff !important;
      border: 0 none;
      border-radius: 0;
      color: #666;
      margin-bottom: 0;
  }
  
  .navbar.navbar-shadow {
      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
  }
  
  #button-menu {
      display: inline-block;
      cursor: pointer;
      color: #6D6D6D;
  }
  
  
  @media (max-width: 640px) {
      .navbar-brand {
          font-size: 14px;
          padding: 15px 7px;
      }
  }
  
  /* Sidebar Menu */
  
  #menu, 
  #menu ul, 
  #menu li {
      padding: 0;
      margin: 0;
      min-height: 100%;
      list-style: none;
  }
  
  #menu {
      margin-bottom: 25px;
  }
  
  #menu &gt; li {
      position: relative;
  }
  
  #menu li a {
      text-decoration: none;
      display: block;
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #515151;
  }
  
  #menu li a i {
      font-size: 16px;
  }
  
  #menu &gt; li &gt; a {
      color: #C4C4C4;
      font-size: 14px;    
      padding-left: 13px;
      border-bottom: 1px solid #585858;
  }
  
  #menu &gt; li &gt; a:hover {
      background-color: #444444;
  }
  
  #menu &gt; li &gt; a &gt; span {
      display: none;
      margin-left: 8px;
  }
  
  #menu li li a {
      color: #9d9d9d;
  }
  
  #menu li li a:hover {
      color: #FFFFFF;
      background-color: #373737;
  }
  
  #menu li li a:before {
      content: "\f101";
      font-size: 14px;
      font-family: FontAwesome;
      margin-left: 10px;
      margin-right: 10px;
      transition: margin ease 0.5s;   
  }
  
  #menu li li a:hover:before {
      margin-right: 20px;
  }
  
  #menu &gt; li.active &gt; a {
      color: #DDDDDD;
      background: #373737;
  }
  
  #menu li.active li a {
      color: #C4C4C4;
  }
  
  #menu li li.active &gt; a:last-child {
      color: #FFFFFF;
  }
  
  #menu li li.active a:last-child:before {
      margin-left: 20px;
      margin-right: 10px;
  }
  
  #menu &gt; li &gt; ul {
      position: absolute;
      left: 50px;
      top: 0px;
      width: 210px;
      background-color: #444444;
      visibility: hidden;
  }
  
  #menu li ul {
      overflow: hidden;
  }
  
  #menu &gt; li:hover &gt; ul {
      visibility: visible;
  }
  
  #menu li li a.parent:after, #column-left.active #menu &gt; li a.parent:after {
      font-family: FontAwesome;
      content: "\f105";
      float: right;
      margin-right: 8px;
  }
  
  #menu li li.open &gt; a.parent:after, #column-left.active #menu &gt; li.open &gt; a.parent:after {
      font-family: FontAwesome;
      content: "\f107";
      float: right;
      margin-right: 8px;
  }
  
  #menu li ul a {
      padding-left: 20px;
  }
  
  #menu li li ul a {
      padding-left: 40px;
  }
  
  #menu li li li ul a {
      padding-left: 60px;
  }
  
  #menu li li li li ul a {
      padding-left: 80px;
  }
  
  /* Panels */
  .panel {
      border-radius: 0px;
  }
  .panel .panel-heading {
      position: relative;
  }
  .panel-heading h3 i {
      margin-right: 8px;  
      -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .panel-heading i {
      font-size: 16px;
      font-weight: 500;   
  }
  .panel-heading h3 {
      font-size: 16px;
      font-weight: 500;
      display: inline-block;
  }
  
  /* Primary Panel */
  .panel-primary {
      border: 1px solid #c3e4f6;
      border-top: 2px solid #5cb7e7;
  }
  
  .panel-primary .panel-heading {
      color: #1e91cf;
      border-color: #96d0f0;
      background: white;
  }
  
  /* Default Panel */
  .panel-default {
      border: 1px solid #e8e8e8;
      border-top: 2px solid #bfbfbf;
  }
  
  .panel-default .panel-heading {
      color: #595959;
      border-color: #e8e8e8;
      background: #fcfcfc;
  }
  
  /* Info Panel */
  .panel-info {
      border: 1px solid #e8e8e8;
      border-top: 2px solid #3c8dbc;
  }
  
  .panel-info .panel-heading {
      color: #595959;
      border-color: #e8e8e8;
      background: #fcfcfc;
  }
  </code></pre>