How to create a Gmail like layout with Twitter Bootstrap

Question

Is it possible to create a GMail/GoogleGroups-like layout using Twitter Bootstrap, so that the layout always fits to the viewport (window height) and the sidebar and content area are separately scrollable?

--------------------------------------------------------------------------
|                                                                        |
|                    Fixed top navbar                                    |
--------------------------------------------------------------------------
|         |                                                              |   
| Sidebar |       Content area scrollable                                |
| scrollable                                                             |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|------------------------------------------------------------------------|

Answer 1

You don't need to use Bootstrap to create this layout (nor do I think Bootstrap supports it, at least not without significant modification).

Of course, you can still use Bootstrap for everything else on the page. If you really want the Google Apps look, you'll need to tweak some of the default Bootstrap styles.

What's Possible

For fun, here's a quick knockoff of the Gmail interface using the basic techniques I describe below and a variety of Bootstrap components.

Demo: http://jsfiddle.net/Ly6wmyr2/1/

_{The code here is definitely demo quality and beyond the scope of a Stack Overflow question. I'll leave it up to the reader to dissect.}

Simple Breakdown

Demo: http://jsfiddle.net/vLm26g4g/1/

Notes

1. We're using absolute positioning.
2. Just because it's absolutely positioned doesn't mean it can't be responsive (if desired).
3. Containers are positioned using all 4 sides inside a 100% height body.
4. This approach will work in all browsers IE 7+. If you can support IE8+, using box-sizing: border-box makes the dimension calculations easier.
5. Layouts like this really benefit from LESS CSS, as you can declare the basic sizes in a single location.

HTML {
    height: 100%;
}
BODY {
    position: relative;
    height: 100%;
}
HEADER {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 8px;
    background-color: #ddd;
}
#side {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 20%;
    background-color: #eee;
    overflow: auto;
}
#content {
    position: absolute;
    top: 80px;
    left: 20%;
    bottom: 0;
    right: 0;
    overflow: auto;
}

Answer 2

I don't think there is an out-of-the-box Bootstrap solution but with a few overrides to the Bootstrap CSS and a position:absolute container around the left side nav and *wide content are*a this should work. You'll see that both left/right spans have independent scroll bars...

Gmail-like Bootstrap Layout Demo

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">

      <!-- top nav --->

    </div>
  </div>
</div>
<div class="box">
  <div class="row-fluid">
    <div class="column span3">

     <!-- left-side nav --->

    </div>
    <div class="column span9">

     <!-- content area --->

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

Add some Bootstrap CSS overrides, and tweak the .box and .column containers..

html, body {
    height: 100%;
}

.row-fluid {
    height: 100%;
}

.column:before, .column:after {
    content: "";
    display: table;
}

.column:after {
    clear: both;
}

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

.box {
    bottom: 0; /* increase for footer use */
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

.span9.full {
    width: 100%;
}

Here is the working Bootply: http://bootply.com/60116 (also includes the content area rows and pagination)