Bootstrap 3- fixed sidebar layout issue

Question

I am newbie in bootstrap , I am designing a admin panel, heres the DEMO .

I want to make the sidebar height equaly depend on right content div. .i.e (side bar background color will be gray).

Html Markup : (also want to know whether my html structure was proper)

   <!-- Headder row -->
    <div class="row">
       <div class="navbar"> .....  </div>
    </div>

 <!-- Content row -->
    <div class="row">
        <!-- SIDEBAR Open -->
        <div id="sidebar-left" class="col-2 col-lg-2">
            ....
       </div>
   <!-- right content box -->
     <div id="content-right" class="col-lg-10 container" >
      ......
    </div
   </div>


<!-- Footer row -->
    <div class="row">
      ......   
    </div>

Expected output :

Solution 1

try this

http://jsfiddle.net/BM65D/

body{
    margin:0;
    padding:0;
}
.header{
    background-color:#00A2E8;
    height:50px;
    position:fixed;
    top:0;
    width:100%;
}
.footer{
    background-color:gray;
    height:50px;
    position:fixed;
    bottom:0;
    width:100%;
}
.left{
    height:400px;
    background-color:#C3C3C3;
    width:200px;
    position:fixed;
    top:50px;  
}
.right{
    left:200px;
    width:100%;
    position:absolute;
}

Solution 2

You can do this with display:table-cell property

I have created a bootply demo => http://bootply.com/100790

Steps:

Add another class to your wrapper like .mainwrap and in CSS

.mainwrap {
 display:table;
}

Add CSS to sidebar left and content right

.sidebar-left {
  display:table-cell;
  float:none;
}

.content-right {
 display:table-cell;
 float:none;
}

I have removed min-height from content-right, as table will not work with it. Also changed float to none. becuase you no longer need it.

Working Demo: http://bootply.com/100790

Hope this helps

Comments

[Satinder singh]

thanks for reply, but here you have fixed the height of left bar, and also with out using bootstrap?. i need column right,column left

[Satinder singh]

thanks for a try, but is their any other way without using Jquery instead of calculating hieght used bootstrap build-in classes

[web2008]

I think you can do it through CSS only when heights of the left side content and right side content are fixed and static.Otherwise should go with Jquery only..

[Satinder singh]

have tag bootstrap 3, the link you provided is version 2.3