CSS full-size two-column layout with navigation bar

I have a layout with two columns, a sidebar and main content that need to stretch the height of the browser. So, the 100%height of my loading tray is lower navbar, initially 40pxin height. This 40pxchanges through Twitter Bootstrap CSS if you are viewing the page in a narrow browser (for example, on a mobile device). The new height is based on the number of links in navbar, so it is dynamic.

I know that I can come up with some kind of JavaScript to adjust the property topto “reduce" the height of the columns. But I would really like to do this in CSS, if I can.

Note that I cannot just overlap columns by changing z-index.

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

Markup

+ - - - - - - - - - - - - - - - - - - - - +
| 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 Twitter boot tray example navbarhere: http://jsfiddle.net/flackend/MDZaG/

Increase browser size or “result” frame to see uncompensated navbar.

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

EDIT 2

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

EDIT 3

I changed the CSS above and the jsfiddle link so that the positioning is absolutein order to prevent confusion.

:

, , CSS- CSS3 calc, js, ...

: http://jsfiddle.net/flackend/mu4Ey/5/

Twitter Bootstrap js , navbar scrollHeight. js CSS top , . , Twitter Bootstrap js.

, , , CSS3 calc, js.