带有导航栏的CSS全高双列布局

Question

我有一个包含两列的布局,侧边栏和主要内容,需要拉伸浏览器的高度.所以,100%更少我的Twitter Bootstrap的高度,navbar最初40px的高度.这40px通过Twitter的引导CSS,如果你正在浏览的网页在一个狭窄的浏览器(如在移动设备上)的变化.新的高度基于其中的链接数量navbar,因此它是动态的.

我知道我可以想出一些JavaScript来调整top属性以"缩小"我的列的高度.但是如果可以的话,我真的很想在CSS中这样做.

请注意,我不能通过更改来重叠列z-index.

请参阅此处的模型:http://jsfiddle.net/flackend/mu4Ey/3/

布局

+ - - - - - - - - - - - - - - - - - - - - +
| 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;
}?

谢谢你的帮助!

编辑

navbar在这里查看Twitter Bootstrap的示例:http://jsfiddle.net/flackend/MDZaG/

增加浏览器的大小或"结果"框架以查看未折叠的内容navbar.

另一个示例和文档:http://twitter.github.com/bootstrap/components.html#navbar

编辑2

两列的内容不会影响列的高度; 他们总是100%减去以下的高度navbar:

编辑3

我更改了上面的CSS和jsfiddle链接,以便定位是absolute为了防止混淆.

最终编辑:CHOSEN SOLUTION

由于CSS3之外似乎没有CSS解决方案calc,我写了一些js来做这个诀窍......

在这里看到:http://jsfiddle.net/flackend/mu4Ey/5/

我寻遍Twitter的引导JS源代码,并想通了,他们计算从全新的高度navbar的scrollHeight.我的js做了同样的事情并且动画了CSS top属性,稍微滞后以隐藏身体.这是一个可怕的解决方案,因为Twitter Bootstrap可以改变动画速度并打破我的js.

我应该做的是找出如何定位支持CSS3的浏览器calc并让他们使用它并让所有其他浏览器使用js.

Answer 1

我认为这是不可能的。除非使用尚不具备适当浏览器支持的 css3 功能（例如，“flexbox”可能能够实现这一目标 - 我不太确定，因为我还没有充分使用它。再说一遍，我'我正在等待更好的支持）。

话虽如此，我建议使用媒体查询。找出布局中断的位置，并在该点周围添加一个，您可以在该点增加高度并调整内容和侧边栏 div 的顶部值。一个更好的解决方案，在我看来，仍然使用媒体查询，当您低于一定宽度时，将您的导航放入选择元素（或您自己制作的下拉列表）中。这样你就可以保持“顶部”和“高度”不变。