CSS带导航栏的全高双栏布局
我有一个包含两列、一个侧栏和主要内容的布局，需要拉伸浏览器的高度。因此，CSS带导航栏的全高双栏布局,css,twitter-bootstrap,Css,Twitter Bootstrap,我有一个包含两列、一个侧栏和主要内容的布局，需要拉伸浏览器的高度。因此，100%，减去我的推特引导navbar的高度，它最初的高度是40px。如果你在狭窄的浏览器（比如在移动设备上）中查看页面，那么通过Twitter引导CSS，40px会发生变化。新高度基于导航栏中链接的数量，因此它是动态的 我知道我可以想出一些JavaScript来调整top属性以“收缩”我的列的高度。但如果可以的话，我真的很想用CSS来做 请注意，我不能通过更改z-index来重叠列 请参见此处的实际模型： 布局 + - -
100%navbar40px40px导航栏中链接的数量，因此它是动态的
我知道我可以想出一些JavaScript来调整top
属性以“收缩”我的列的高度。但如果可以的话，我真的很想用CSS来做
请注意，我不能通过更改z-index
来重叠列
请参见此处的实际模型：
布局
+ - - - - - - - - - - - - - - - - - - - - +
| navbar |
+ - - - + - - - - - - - - - - - - - - - - +
| | |
|< 20% >|<-- 80% ------------------------>|
| | |
| | Google Maps API map contained |
| | here. |
| | |
| | |
| | |
| | |
+ - - - + - - - - - - - - - - - - - - - - +
谢谢你的帮助
编辑
请参见此处的Twitter引导navbar
示例：
增大浏览器或“结果”框的大小，以查看未折叠的导航栏
另一个示例和文档：
编辑2
两列的内容不会影响列的高度；它们总是100%
减去导航栏的高度
：
编辑3
我更改了上面的CSS和JSFIDLE链接，以便定位为absolute
，以避免混淆
最终编辑：选择的解决方案
因为除了CSS3calc
之外似乎没有CSS解决方案，所以我编写了一些js来实现这个技巧
请看这里：
我搜索了Twitter Bootstrap js源代码，发现他们是从navbar
的scrollHeight
计算新高度的。My js也会这样做，并对CSStop
属性设置动画，稍微延迟一点以隐藏主体。这是一个可怕的解决方案，因为Twitter引导可能会改变动画速度并破坏我的js
我应该做的是确定如何针对支持CSS3calc
的浏览器，让他们使用它，让所有其他浏览器都使用js。我认为这是不可能的。如果不使用css3功能，这些功能还没有适当的浏览器支持（例如，flexbox可能能够实现这一点-我不确定，因为我还没有充分使用它。同样，我在等待更好的支持）
话虽如此，我建议使用媒体查询。找出布局中断的位置，并在要增加高度的点周围添加一个，并调整内容和侧边栏div的顶部值。一个更好的解决方案，imo，仍然使用媒体查询，当你到达某个宽度以下时，将你的导航放在一个选择元素（或你自己制作的下拉列表）中。这样，您可以保持“顶部”和“高度”不变。如果它们始终为100%高度，则创建3个绝对定位的div，如下所示：
纯css无法计算100%-40px的值。你需要为它使用JavaScript。实际上你可以使用CSS3的Calc。它开始得到支持，但我不认为它是安全的。@ SviBeeDe的“100% -40Px”CSS已经编写并工作：我正在尝试是否有办法将工作CSS改变为与“相对”的值/位置而不是绝对像素一起工作的东西。这样，当40px改变时，柱高度会自动调整。@flackend是位置：在柱上固定你真正需要的？这正是我所说的。您可以为边距或左上角指定静态值。。。但是，可以动态使用css的唯一方法是使用流体布局（基于%），但这不符合您的目的。有什么特别的理由反对使用两行javascript来解决这个问题吗？我没有读过你最近的编辑。此解决方案满足不同的需求。让我再试一次。谢谢你的回答！这实际上是我已经做过的，但是有点混合了。
.sidebar, .content {
position: absolute;
top: 40px;
bottom: 0;
}
.sidebar {
left: 0;
right: 80%;
}
.content {
left: 20%;
right: 0;
}