Question

我有一个包含两列的布局，一个侧边栏和主要内容，需要拉伸浏览器的高度。所以，100%，减去我的Twitter Bootstrap navbar的高度，该高度最初为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 Bootstrap navbar的示例：http://jsfiddle.net/flackend/MDZaG/

增加浏览器或“结果”框架的尺寸，以查看未折叠的navbar。

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

编辑2

两列的内容不会影响列的高度;它们始终为100%减去navbar的高度：

example

编辑3

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

最终编辑：CHOSEN SOLUTION

由于除了CSS3 calc之外似乎没有CSS解决方案，我写了一些js来做这个技巧......

请在此处查看：http://jsfiddle.net/flackend/mu4Ey/5/

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

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

Answer 1

我不认为这是可能的。不是没有使用没有适当的浏览器支持的css3功能（例如，'flexbox'可能能够实现这一点 - 我不确定，因为我还没有玩过它。再次，我'等待更好的支持）。

话虽这么说，我建议的是使用媒体查询。找出布局中断的位置，并在该点附近添加一个，以增加高度并调整内容和侧边栏div的顶部值。一个更好的解决方案，imo，仍然使用媒体查询，当你达到一定的宽度时，你的导航将在一个选择元素（或你自己的下拉列表）中。这样你就可以保持'顶部'和'高度'不变。

Answer 2

如果它们总是100％高度，那么创建3个绝对定位的div，如下所示：

http://jsfiddle.net/ywySt/

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

2 个答案: