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

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

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)