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应该替换为大小.希望这可以帮助!