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 are

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: #ffffd;
}
#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;
}