CSS全屏网格布局（带有一些滚动部分）

Question

所以，它是2010年，我仍然不知道如何在CSS中进行这种布局..

很抱歉，如果这有明显的答案，我感谢您提供的任何帮助。

我已经看到了部分内容的紧密解决方案，但并非所有这些结合起来。

alt text http://img203.imageshack.us/img203/6096/layoutc.png

1. 布局必须始终填满屏幕（未知尺寸和动态调整大小）
2. A，D，C，F是固定高度（例如64px）
   • B和E必须展开以填充剩余的垂直空间。
   • 如果B或E的空间不足，则应显示垂直滚动条（仅在其区域内; B和E应相互独立滚动）。
3. A，B，C是固定宽度（例如300px）
   • D，E，F必须展开以填充剩余的水平空间。
4. A，B，C是语义相关的内容。
5. D，E，F是语义相关的内容。
6. 除上述2之外，不应发生其他滚动。
7. C是可选的
8. 仅限较新的浏览器，我不关心IE6或7

Answer 1

啊，我挣扎了一段时间......结果比预期的要容易得多。

A {
    position: absolute;
    top: 0;
    left: 0;
    height: #px;
    width: #px;
}
B {
    position: absolute;
    top: {height of A};
    left: 0;
    width: #px;
    bottom: {height of C};
    overflow-y: scroll; /* note that the scrollbar will always be visible */
}
C {
    position: absolute;
    left: 0;
    width: #px;
    bottom: 0;
    height: #px;
}
D {
    position: absolute;
    top: 0;
    left: {width of A};
    right: 0;
    height: #px;
}
E {
    position: absolute;
    top: {height of D};
    left: {width of B};
    right: 0;
    bottom: {height of F};
    overflow-y: scroll;
}
F {
    position: absolute;
    left: {width of F};
    right: 0;
    bottom: 0;
    height: #px;
}

请注意，＃px应替换为大小。 希望这有帮助！