Geek Answers Handbook

CSS full-screen grid structure (with some scroll sections)

So this is 2010, and I still don't know how to make this layout in CSS.

Sorry if this has an obvious answer, I appreciate any help you could offer.

I have seen close solutions for parts of this, but not all of them are combined.

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

  • The layout should always fill the screen (unknown sizes and dynamic resizing)
  • A, D, C, F - fixed height (e.g. 64px)
    • B and E must expand to fill the remaining vertical space.
    • If B or E is exhausted, a vertical scroll bar will appear (only inside its area, B and E should scroll independently of each other).
  • A, B, C - fixed width (e.g. 300 pixels)
    • D, E, F must be expanded to fill the remaining horizontal space.
  • A, B, C - semantically related content.
  • D, E, F - semantically related content.
  • No other scrolling should occur except 2 above.
  • C optional
  • The latest browsers, I don't care what IE6 or 7
+2
source share
1 answer

Ah, I struggled with this for a while ... the result is much simpler than expected.

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; }

Please note that #px should be replaced with size. Hope this helps!

+5
source

More articles:


All Articles