bootstrap 3.0 full length body sidebar

Question

I'm trying to get bootstrap divs to be full body length.

This is what I've tried so far: http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

As the right column grows longer, I want the sidebar to do the same.

Rhatany

It would definitely help if you included code showing what you have already tried. – Disprize

You want it to be the the full height of what? The body or the window? – Giffin

Edited post with bootply snippet. – Rhatany

I can't seem to find out how to work bootply, I get 403 errors, but if you want to make the sidebar as high as the body, the page must know how high the body is. – Giffin

Answer 1

The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and @media breakpoints handle the overall layout pretty well:

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

Working solution: http://www.bootply.com/111837

If you use "col-sm-x" or "col-lg-x" you just change the @media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.

Borisborja

this is not a valid solution, if the sidebar has a height that's more than the window height, it won't scroll – Coverup

@SlimFadi without changing anything else from the above, add under your .sidebar CSS the following: overflow: scroll; That should do the trick! – Wallaroo

Answer 2

I solved this by using an absolutely positioned div and a bit of jQuery. I have a Bootstrap navbar with a fixed height of 50px, so that is why you're seeing the 50's in the code. You can remove this if you don't have a top navbar.

This solution works dynamically with any height.

The CSS:

.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

The jQuery:

var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css('height', document_height - 50);
}

The neat thing about this is there will be no flickering of the background because its using CSS to adjust the min-height, so that the jQuery resizing that normally causes a flickering of the background will be hidden on page load.

Igal

Answer 3

approach 1: added empty div with style="clear:both" at the end of wrap div. http://jsfiddle.net/34Fc5/1/

approch 2: http://jsfiddle.net/34Fc5/ :

html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

added "overflow: hidden;" to .wrap changed height: 100% to html, body changed height: 100% to .sidebar

using css way, the height of the sidebar will only match the view port of the browser. so if you look at approach 1, when you scroll you will notice the background stop at viewport. to fix it js is required.

Demogorgon

This method does not work for right sidebars. How do you get that to work? – Rosamondrosamund

Answer 4

The only thing that got it working for me (after many hours of trying everything) was

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

The padding in percent did it for me. Now it goes all the way to the bottom of the page.

Hying