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는 크기로 바꿔야합니다. 희망이 도움이됩니다!