Twitter bootstrap - Fixed layout with scrollable sidebar

Question

I am trying to implement a simple header + 2 column layout using twitter bootstrap.

I have a fixed header with 100% width, and I am now trying to have two fixed-width full-height columns with independent scrollbars. Is there any good way to do this with twitter bootstrap?

Here is a picture of the layout I am trying to build Layout

The header works fine (navbar-fixed-top) For the columns, I use a container with a row and two span*. The container and the row have overflow:hidden and height:100%, while the spans have overflow:auto — Rand, Apr 03 '12 at 16:11
I edited my previous comment, I had pressed enter by accident — Rand, Apr 03 '12 at 16:15

score 35 · Answer 1 · answered Aug 07 '13 at 15:17

35

Use bootstrap's 'pre-scrollable' class on your target div. Set div at some fixed max height. Its aesthetically good, as well.

answered Aug 07 '13 at 15:17

Sourajit Basak

693
5
15

1

I used this with a "well" and it created the effect that I needed just fine -- seems like what was being asked above and is much simpler -- this should be the answer. – Watson Aug 26 '13 at 01:21
6

It would be nice to have the reference/link where you found the pre-scrollable class – GlennG Feb 03 '15 at 15:53

score 8 · Answer 2 · edited Jun 26 '13 at 07:19

I found a way to do it. Not sure it's the best, but it does the trick:

<html>

<head>

    <link rel="stylesheet" media="screen" href="normalize.css">
    <link rel="stylesheet" media="screen" href="bootstrap.min.css">

    <style type="text/css">
            body, html {
                height: 100%;
                overflow: hidden;
            }

            .navbar-inner {
                height: 40px;
            }

            .scrollable {
                height: 100%;
                overflow: auto;
            }

            .max-height {
                height: 100%;
            }

            .no-overflow {
                overflow: hidden;
            }

            .pad40-top {
                padding-top: 40px;
            }
    </style>
</head>

<body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                header contents
            </div>
        </div>
    </div>

    <div class="container max-height no-overflow">
        <div class="row max-height">

            <div class="span8 scrollable">
                <div class="pad40-top">
                    main contents
                </div>
            </div>

            <div class="span4 scrollable">
                <div class="pad40-top">
                    right sidebar contents
                </div>
            </div>

        </div>
    </div>
</body>

http://jsfiddle.net/m4eS4/7/

@lenzai .. are you sure the fiddle is working as expected? I dont see the right sidebar. Thanks. — Mayank Jaiswal, May 13 '13 at 15:05
@MayankJaiswal it seems the scroll bar appear only when needed. i.e. when the screen is small enough. Note that if your resize your window, you should refresh the page , because , I guess, bootstrap javascript is only executed on page load. — Frederic Bazin, May 14 '13 at 00:26
the body overflow:hidden won't play good when browser window becomes small. you have no way to scroll in that case. — L.T., May 25 '16 at 16:42

Twitter bootstrap - Fixed layout with scrollable sidebar

2 Answers2

Linked