全屏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