Bootstrap Off Canvas Show Full Height

Question

I am trying to use Bootstrap off canavas left side bar to toggle on small devices.

here is the bootply code example:

www.bootply.com/C2wQEkdSAn

The p

Answer 1

The problem you're experiencing with the stock offcanvass.css is that it sets the off canvas side bar to position:absolute, which effectively takes the column out of the flow of the page and causes it to overlay the footer when pulled into view. Use the following 3 steps for a simple CSS solution that requires no additional JS.

1. Use static positioning

To get the outcome you're wanting, i.e., to keep the side bar in the flow of the document so it forces the footer down when it comes into view, override the default offcanvas CSS by setting the side bar to position:static.

2. Set the height

Static positioning will put the side bar back in the document flow, but that also means it will cause the content area to be as tall as the side bar even when the side bar is off canvas. To correct that, set the side bar to height:0 when it's off canvas and back to height:auto when it's in view.

3. Set a width and negative margin

I also set a definite size for the side bar (so it doesn't default to the standard offcanvas.css size of 50%), and used an equal width negative left margin to pull it off the page.

Wrap it all in a media query for mobile screens, and you get:

@media (max-width: 767px) {
  .row-offcanvas-left .sidebar-offcanvas {
    position: static;
    width: 200px;
    margin-left: -200px;
    overflow: hidden;
    height: 0;
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    height: auto;
  }
  .row-offcanvas-left.active {
    left: 200px;
  }
}

See this JS Fiddle for the full example. I included a Bootstrap nav bar, a separate offcanvas toggle button that only shows when the side bar is off canvas, and a simple footer for the sake of completeness.

P.S.: I should mention that this method causes the footer to immediately jump to the bottom of the height of the side bar as soon as the side bar comes into view, and some users may not like that. However, it is possible to use CSS transitions and max-height to animate the expansion of the side bar as demonstrated in this SO post, but the result is less than ideal. I only mention it because it might be something others would like to use. Personally, I'm OK with the footer just instantly popping down lower.