全屏CSS佈局挑戰（多列瓦特/頁眉和頁腳）

我已經做了很多關於CSS全屏佈局的研究，我似乎無法找到像我正在嘗試做的事情。我正在尋找具有頁眉，頁腳，多列和側邊欄的全屏佈局。這裏有一個ascii模型，然後是一個photoshop模型。有人有主意嗎？我還沒有找到全屏佈局技術。全屏CSS佈局挑戰（多列瓦特/頁眉和頁腳）

+-----------------------+-------+ 
|      |  | 
+-------------+---------+  + 
|    |   |  | 
|    |   |  | 
|    |   |  | 
|    |   |  | 
|    |   |  | 
|    |   |  | 
+-------------+---------+-------+ 
|        | 
+-------------------------------+

Layout Prototype

那麼告訴我，你是怎麼認爲這可能實現呢？我對CSS 3或HTML 5選項持開放態度，因爲跨瀏覽器兼容性是一種獎勵，但不是必需的（WebKit是目標平臺）。

來源

2011-04-29 Robert Klubenspies

是設計應該只填充視口？或者應該有一個垂直滾動條？ – thirtydot 2011-04-29 20:54:18

理想情況下，它會縮放到瀏覽器，並且每個窗格都將根據需要滾動。我能夠想出這個：http://jsfiddle.net/TX7Zv/2/ – 2011-04-29 22:01:20

請參見下面的代碼在這裏的行動： http://jsfiddle.net/davinciwanab/nX4eq/

<style type="text/css"> 
     * { 
      margin: 0px; 
      padding: 0px; 
      } 
     #header { 
      float: left; 
      width: 75%; 
      height: 20px; 
      background-color: #333; 
      } 
     #colRight { 
      float: right; 
      width: 25%; 
      height: 500px; 
      background-color: #CCC; 
      } 
     #content { 
      float: left; 
      width: 50%; 
      height: 480px; 
      background-color: #EEE; 
      } 
     #contentRight { 
      float: left; 
      width: 25%; 
      height: 480px; 
      background-color: #AAA; 
      } 
     #footer { 
      width: 100%; 
      height: 20px; 
      background-color: #777; 
      } 
    </style> 
</head> 

<body> 
    <div id="header"></div> 
    <div id="colRight"></div> 
    <div id="content"></div> 
    <div id="contentRight"></div> 
    <div style="clear:both;"></div> 
    <div id="footer"></div> 
</body>

來源

2011-04-29 21:03:10 Dave

你來儘可能接近我所尋找的，我感謝你。我能夠前進並把所有東西都弄清楚。以下是我最終想到的：http://jsfiddle.net/TX7Zv/2/請讓我知道你的想法。 – 2011-04-29 22:00:20

很高興幫助！檢查了你的代碼，它看起來像你希望的那樣工作（我假設）。 – Dave 2011-04-30 00:23:36