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應該被大小替換。 希望這有助於！