Full Height Sidebar With Footer in Bootstrap

Question

I'm looking to have a full height sidebar (see #left in example), while still having a footer, using the bootstrap framework.

View the fiddle here.

I've tried the following, but it is not 'footer friendly'. The goal is to have the sidebar 100% of the page height.

#left {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}

Answer 1

You could set display: flex; on the row, for viewport width greater than 992px

@media (min-width: 992px) {
  .row {
      display: flex;
  }
}

FIDDLE

NB: This can ruin other parts of the layout, so if need be - you can make the selector more specific in order to select only that row that you want to be full height.

Answer 2

Try this

body {
      overflow: hidden;
}    

#left {
      background-color: #aaa;
      padding-bottom: 99999px;
      margin-bottom: -99999px;
}

.footer {
    position: relative;
    z-index: 99;
    background: #fff;
}

Use a wrapper (ex: <div class="wrapper"></div> css for it .wrapper { overflow: hidden; } ) or some another class/id and use overflow:hidden style for it.

Answer 3

I might have another way of thinking. Bootstrap have classes that is set rows and col.

 <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 

Try exploring the right class number for your webpage to be a responsive website. Thanks.

Answer 4

The solution is simple. The code you used is perfectly alright.

Updated:

#left {
    position: absolute; //changed from fixed
    top: 51px;
    left: 0; // removed bottom:0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: pink;
    border-right: 1px solid #eee;
}

You just need to do couple of small changes to others to get the desired results from here. Assuming when you said 100%, you meant excluding the top navbar.

1) You just need to push the id="main" div to the right using float: right; so it fits the layout and not hide behind the #left sidebar. Like so

#mid {
  float: right; //added
  background: #666;
}

2) For your footer problem, the culprit is the placement of the <footer> section. If you want the sidebar to extend to full height, even besides the footer. You should place it inside the #main div below the contents.

Latest Fiddle .

Answer 5

You can do it with CSS but there are drawbacks for that solution. And Flexbox still has browser compatibility issues.

There is a simple solution to this using jQuery. You just have to write few lines of codes.

Create a function first:

function sidebarHeight() {
  var containerHeight = $('.main-content').height();
  $('.sidebar').height(containerHeight);
}

Then run that functions on page load and browser resize.

$(window).load(sidebarHeight);
$(window).resize(sidebarHeight);

If you want to read full details, I wrote a tutorial on my Blog . Here is the demo on Codepen.io .

Answer 6

尝试执行position: absolute而不是position: fixed 。