How to implement responsive, independently scrolling panes in Bootstrap? - html

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">Nav</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

Answer 2

I forked Skelly's bootply here while using col-xs-12 and hidden-xs.
<div class="col-xs-12 col-sm-6" id="left">
<p>Left contents</p>
</div>
<div class="hidden-xs col-sm-6" id="right">
<p>Right contents</p>
</div>
I prefer this because it avoids media queries in a css file.

Answer 3

You don't need Bootstrap to do what you want. You can simply modify your existing CSS to following:
#left {
float: left;
width: 75%;
height: 100px;
overflow-y: scroll;
background-color: #FC6E51;
text-align: center;
}
#right {
float: left;
overflow-y: scroll;
height: 100px;
width: 25%;
background-color: #4FC1E9;
text-align: center;
}
And then, in your media query for mobile screens, make both #left and #right flow:none, width: 100% and height: auto;
If you really want to use Bootstrap, just put both #left and #right in the following structure:
<div class="row">
<div class="col-md-8" id="left">Your Code Here</div>
<div class="col-md-4" id="right">Your Code Here</div>
</div>