How to implement responsive, independently scrolling panes in Bootstrap?

Question

I'm working on a web app for which I want to have two independently scrollable areas on larger screens: a main content area on the left, and a smaller sidebar on the right.

I've managed to implement such a layout in CSS using absolute positioning and overflow properties, see this JSFiddle: http://jsfiddle.net/XLceP/

This is great, however I'm also attempting to make use of Bootstrap (3.1.1) in order to make the site responsive and for the components/styling. However I'm at a loss at how to do so.

Basically, I'd ideally like to use Bootstrap conventions (the column classes etc.) to make it so that on mobile screens the right pane collapses below the left pane (or disappears entirely) for a conventional vertical layout, with both taking up the full width. However it seems impossible to do this while using absolute positioning for the larger screen layout.

How can I attempt to tackle this problem?

Answer 1

Update 2019

Bootstrap 4

Now that Bootstrap 4 uses flexbox, you can this layout using flex-grow and the new overflow utility classes. This minimizes the extra CSS that was needed before in BSv3...

<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
    <nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Nav</a></li>
        </ul>
    </nav>
    <div class="row flex-grow-1 overflow-hidden">
        <div class="col-2 mh-100 overflow-auto py-2">
            <h6>Sidebar</h6>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class="col mh-100 overflow-auto py-2">
            <h3>Body content</h3>
        </div>
    </div>
    <div class="row flex-shrink-0 bg-light">
        <div class="col-12 py-2">
            <p>Footer ...</p>
        </div>
    </div>
</div>

https://codeply.com/go/LIaOWljJm8

Bootstrap 3 (original answer)

You can use a CSS media query to "disable" the absolute positioning on mobile screens. This will let Bootstrap's responsiveness kick in...

@media (min-width: 768px){
  #left {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 75%;
    overflow-y: scroll; 
  }
  
  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 25%;
  }
}

Demo: http://bootply.com/126137