Bootstrap 100% height RIGHT sidebar - css

Question

I'm using Bootstrap 3 with a 2 column layout. The right column is my sidebar. I have different backgrounds for each and I can tell that my sidebar column does not continue all the way down to the bottom of the main content wrapper. In most cases, the main content, which is on the right, is longer than the sidebar content, but I don't want to see the background of the main content area, but the sidebar content background continued.
Here's the jsfiddle that I modeled after in order to achieve a 100% height sidebar, but I can't seem to get it to work.
http://jsfiddle.net/34Fc5/1/
Here's the gist of my code:
<div id="content" class="clearfix row">
<div id="main" class="col-sm-8 clearfix" role="main">
<article id="post-1728" class="post-1728 page type-page status-publish hentry clearfix" role="article" itemscope="" itemtype="http://schema.org/BlogPosting">
<header>
<div class="page-header"><h1 class="entry-title" itemprop="headline">About</h1></div>
</header> <!-- end article header -->
<section class="post_content clearfix" itemprop="articleBody">
<p class="lead">LENGTHY CONTENT</p>
</section> <!-- end article section -->
<footer>
</footer> <!-- end article footer -->
</article> <!-- end article -->
</div> <!-- end #main -->
<div id="sidebar1" class="col-sm-4" role="complementary">
<div class="sidebar-content"></div>
</div>
<div style="clear:both">
</div>
Here's my jsfiddle:
http://jsfiddle.net/8yvgh7xj/
It would be great if someone has had this issue before. I see plenty of LEFT sidebar 100%, but no right sidebars with Bootstrap.
Thanks.

Answer 1

Sidebar on the left
On option would be removing the sidebar from normal flow by absolute positioning, and expanding its height (the margin box) by top: 0, bottom: 0 declarations with the respect to the wrapper, .wrap.
.sidebar {
position: absolute;
top: 0; bottom: 0; left: 0;
}
.wrap {
position: relative;
min-height: 100%;
}
Then we need to push the right column containing the <article> to the right by col-xs-offset-4 offset class - based on the size of the sidebar - as follows:
EXAMPLE HERE
<div class="col-xs-8 col-xs-offset-4"> ... </div>
Sidebar on the right
Considering the same approach, the only thing should be changed is to alter left: 0 to right: 0.
Also there's no need to have offset class on the other column; Therefore you could remove col-xs-offset-4 as well.
UPDATED EXAMPLE
<div class="col-xs-8"> ... </div>

Answer 2

I feel your pain. I have run into this problem and there don't seem to be many elegant fixes for this issue. A few approaches that can be taken include:
Use padding and negative margin to increase the height (see article below)
http://www.positioniseverything.net/articles/onetruelayout/equalheight
I have have used this in previous projects and it works very nicely - there are some issues that are addressed in the article - but I have found this technique to be reliable.
Use Javascript to increase the height of the div at runtime
you may see a flicker whilst the heights of the divs are calculated and adjusted.
Use tables
doesn't fit in well with the bootstrap paradigm of laying out page - may have issues with responsive design
The following question CSS - Expand float child DIV height to parent's height addresses the problem in some detail.
your css becomes:
#content {
overflow: hidden;
}
#sidebar1{
background-color:#eee;
background-repeat: repeat;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#sidebar1 .sidebar-content{
width:100%;
padding: 5px;
margin:0;
position:relative;
}