Clever Geek Handbook

Bootstrap height 100% RIGHT sidebar

I am using Bootstrap 3 with 2 column layout. The right column is my sidebar. I have different backgrounds for each, and I can tell that my sidebar column doesn't extend all the way to the bottom of the main content wrapper. In most cases, the main content 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 background of the sidebar content continues.

Here's a jsfiddle I modeled after getting the sidebar 100% high, but I can't seem to get it to work.

http://jsfiddle.net/34Fc5/1/

Here is 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 is my jsfiddle:

http://jsfiddle.net/8yvgh7xj/

It would be great if someone had this problem before. I see a lot of 100% LEFT sidebars, but no right sidebars with Bootstrap.

Thank.

+3


source to share


2 answers


I can feel your pain. I ran into this problem and there don't seem to be many elegant fixes for this problem. Several approaches that can be taken include:

  • Use additive and negative headroom to increase height (see article below)

  • Use Javascript to increase div height at runtime

    • you can see flickering while the divs heights are calculated and adjusted.

  • Use tables

    • does not fit into the initial page loading paradigm - problems with responsive design may arise.

The next question is CSS. Expand the parent height of the DIV with the parent flow. will consider the problem in detail.



your css will be:

#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;
}
+5


source


Left side panel

The option to "On" will be removed the side panel from the normal flow by positioning absolute

and increase its height (Field field) advertisement top: 0

, bottom: 0

with 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>

right to the offset class col-xs-offset-4

- based on the sidebar size - like this:

EXAMPLE HERE

<div class="col-xs-8 col-xs-offset-4"> ... </div>


Side panel right

Given the same approach, the only thing to change is to change left: 0

to right: 0

. It is also not necessary to have an offset class in another column; Therefore, you can also uninstall col-xs-offset-4

.

UPDATED EXAMPLE

<div class="col-xs-8"> ... </div>
+5


source






More articles: