css - 使用 css 动态更新容器高度

Question

我想实现一个由 3 个单元格组成的布局；

一个固定的header(position: fixed;),

B 左侧菜单，

C 主容器。

具有固定高度的 A 和 B。

C 填满剩余空间(即剩余高度)。 使用 CSS，我怎样才能达到这个结果？

仅当 C 部分高度小于主体/窗口高度时才会出现问题。

到以下link你可以得到一个如何实现这个结果的例子。但只有当你有一个专栏时它才有效。

http://jsfiddle.net/hqCcx/3/

Answer 1

好吧，我终于找到了解决方案......

诀窍是将最外层元素的高度设置为100%

此外，制作 100% 高度的一般规则是在内容容器上设置最小高度。

html, body {height: 100%}

#content {min-height: 100%}

为此link工作示例。