Bootstrap 100% height RIGHT sidebar

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

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:

1. 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.

2. 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.

3. 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;
}