bootstrap 3.0 full length body sidebar

Question

I'm trying to get bootstrap divs to be full body length.

This is what I've tried so far: http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

As the right column grows longer, I want the sidebar to do the same.

Answer 1

The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and @media breakpoints handle the overall layout pretty well:

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

Working solution: http://www.bootply.com/111837

If you use "col-sm-x" or "col-lg-x" you just change the @media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.