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是固定的宽度（例如300像素）
   • 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应该被大小替换。 希望这有助于！