How to create two independently-scrollable columns in a responsive grid? [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

I have a need to present a master-detail screen where the master and detail are each independently-scrollable, side-by-side columns in a responsive grid. When the browser width is reduced below some threshold, the two columns become stacked, with only a single full-page scroll.

Ideally, I'd like this to be done within twitter-bootstrap. It seems this should be simple?

Answer 1

I'd imagine you want something like this in Bootstrap with the .scrollable divs set to have "overflow:auto" on them.

Bootstrap will make then stack automagically at lower resolutions.

<div class="row-fluid">
    <div class="span6">
        <div class="scrollable"></div>
    </div>
    <div class="span6">
        <div class="scrollable"></div>
    </div>
</div>