CODEWITHSUNDEEP
responsive-designtwitter-bootstrap-3htmlsidebar
black_rabbit
black_rabbit

Reputation: 277

bootstrap 3.0 full length body sidebar

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.

Upvotes: 18

Views: 39326

Answers (4)

kjdion84
kjdion84

Reputation: 10064

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.

Upvotes: 4

Yoko
Yoko

Reputation: 803

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.

Upvotes: 0

pjfamig
pjfamig

Reputation: 533

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.

Upvotes: 35

Shadow_boi
Shadow_boi

Reputation: 2198

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.

Upvotes: 0

Related Questions