4

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.

creimers
  • 4,975
  • 4
  • 33
  • 55
Rick Scolaro
  • 485
  • 1
  • 10
  • 28

2 Answers2

7

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>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • 1
    I looked at your jsfiddle and it looks like the sidebar is on the left. I wanted the opposite, where the grey sidebar with a small amount of content continues to the bottom. – Rick Scolaro Sep 24 '14 at 21:38
  • 1
    @RickScolaro I just modified the first fiddle demo you have given within the question: http://jsfiddle.net/34Fc5/1/ in which the sidebar is on the left. Anyway, I'll update the answer in minutes. – Hashem Qolami Sep 24 '14 at 21:44
  • 1
    Its the second fiddle after my code that you should attempt to modify. Thanks. – Rick Scolaro Sep 24 '14 at 21:45
  • That worked, almost. If the content is shorter than the sidebar, the sidebar runs past it. – Rick Scolaro Sep 25 '14 at 02:53
  • The side bar should run past it and file the screen, this is the correct answer and should be marked as the answer – Brian Ogden Nov 03 '15 at 20:03
6

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)

  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;
}
Community
  • 1
  • 1
Alan Wolman
  • 673
  • 4
  • 16