CSS full-height two-column layout with navbar

Question

I have a layout with two columns, a sidebar and main content, that need to stretch the height of the browser. So, 100%, less the height of my Twitter Bootstrap navbar which is initially 40px in height. That 40px changes via Twitter Bootstrap CSS if you're viewing the page in a narrow browser (like on a mobile device). The new height is based on the number of links in the navbar, so it's dynamic.

I know I can come up with some JavaScript to adjust the top property to "shrink" my columns' height. But I'd really like to do it in CSS if I can.

Note that I can't just overlap the columns by changing the z-index.

See the model in action here: http://jsfiddle.net/flackend/mu4Ey/3/

Layout

+ - - - - - - - - - - - - - - - - - - - - +
| navbar                                  |
+ - - - + - - - - - - - - - - - - - - - - +
|       |                                 |
|< 20% >|<-- 80% ------------------------>|
|       |                                 |
|       | Google Maps API map contained   |
|       | here.                           |
|       |                                 |
|       |                                 |
|       |                                 |
|       |                                 |
+ - - - + - - - - - - - - - - - - - - - - +

CSS

.sidebar, .content {
    position: absolute;
    top: 40px;
    bottom: 0;
}

.sidebar {
    left: 0;
    right: 80%;
}

.content {
    left: 20%;
    right: 0;
}​

Thanks for any help!

EDIT

See an example of the Twitter Bootstrap navbar here: http://jsfiddle.net/flackend/MDZaG/

Increase the size of the browser or the "result" frame to see the non-collapsed navbar.

Another example and documentation: http://twitter.github.com/bootstrap/components.html#navbar

EDIT 2

The contents of the two columns will not affect the columns' height; they will always be 100% minus the height of the navbar:

EDIT 3

I changed the CSS above and the jsfiddle link so that the positioning is absolute to discourage confusion.

FINAL EDIT: CHOSEN SOLUTION

Since there seems to be no CSS solution beyond CSS3 calc, I wrote some js to do the trick...

See it here: http://jsfiddle.net/flackend/mu4Ey/5/

I searched through the Twitter Bootstrap js source code and figured out that they were calculating the new height from the navbar's scrollHeight. My js does the same and animates the CSS top property with a slight lag to hide the body. It's a horrible solution because Twitter Bootstrap could alter the animation speed and break my js.

What I should do is fin out how to target browsers that support CSS3 calc and let them use it and have all other browsers use the js.

Answer 1

I don't think this is possible. Not without using css3 features which do not have the proper browser support yet ('flexbox', for example, might be able to achieve this - I'm not really sure as I haven't yet played enough with it. Again, I'm waiting for a better support).

That being said, what I would suggest would be to use media queries. Figure out where the layout breaks and add one around that point where you'd increase the height and adjust the top value for the content and sidebar divs. A better solution, imo, still using media queries, would be to put your nav inside a select element (or your own made dropdown) when you get below a certain width. That way you could keep the 'top' and 'height' unchanged.