5

我有一个包含两列的布局，一个侧边栏和主要内容，需要拉伸浏览器的高度。所以，100%减去我的 Twitter Bootstrapnavbar最初40px的高度。40px如果您在狭窄的浏览器（例如在移动设备上）查看页面，这将通过 Twitter Bootstrap 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;
}​

谢谢你的帮助！

编辑

在此处查看 Twitter 引导程序的示例：http navbar: //jsfiddle.net/flackend/MDZaG/

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

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

编辑 2

两列的内容不会影响列的高度；它们总是100%减去 的高度navbar：

例子

编辑 3

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

最后编辑：选择的解决方案

由于似乎没有 CSS3 之外的 CSS 解决方案calc，我写了一些 js 来解决这个问题......

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

我搜索了 Twitter Bootstrap js 源代码，发现他们正在计算新的navbar高度scrollHeight。top我的 js 做同样的事情，并且稍微滞后地为CSS 属性设置动画以隐藏正文。这是一个可怕的解决方案，因为 Twitter Bootstrap 可能会改变动画速度并破坏我的 js。

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

4

2 回答 2

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.

于 2012-07-16T19:09:09.200 回答
1

If they will always be 100% height, then create 3 absolutely positioned divs, like this:

http://jsfiddle.net/ywySt/

于 2012-07-16T19:13:34.643 回答