全高和全宽CSS布局

我正在寻找一种方法来创建一个只有CSS(没有JavaScript)的布局,它有5个区域,如下所示:

   ┌────────────────────┐
   │          H         │
   ├────┬────────┬──────┤
   │    │        │      │
   │    │        │      │
   │    │        │      │
   │  A │    B   │  C   │
   │    │        │      │
   │    │        │      │
   │    │        │      │
   ├────┴────────┴──────┤
   │          F         │
   └────────────────────┘

(仅当字体具有Unicode方框线条绘制字符时,上图才会正确显示。)

A、 B,C必须具有相同的高度;H和F必须具有相同的宽度。也就是说,除了一个固定的边界之外,区域之间不能有间隙。

   <textarea style="width:100%;height:100%">Just a test</textarea>

浏览器窗口右侧不应有滚动条(因为H、C和F的高度正好等于浏览器客户端区域的高度)。

如果您使用的是 <table>

我知道有一些W3C工作组致力于通过一些特性来扩展CSS标准,这些特性将使上述布局非常容易实现。然而,这些标准扩展目前并没有被大多数浏览器实现;我需要一个能与当前浏览器一起工作的解决方案。

因此,我的问题是:是否可以只使用CSS创建上面的布局( 没有JavaScript,没有虚假的列,没有 <表> )? 当然,这个解决方案应该适用于当前的web浏览器。

基于Gilsham提供的解决方案,我成功地编写了一个示例页面,生成了所需的仅CSS布局(使用Firefox 3.5.5和IE8进行了测试):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
    height:100%;    
    margin:0;
    padding:0;
    border:0;
}

div{
    margin:0;
    border:0;
}

textarea {
    margin:0;
    border:0;
    padding:0;
    height:100%;
    width:100%;
}

.content{
    display:table;
    width:100%;
    border-collapse:separate;
    height:80%;
}

.Col{
    display:table-cell;
    width:30%;
    height:100%;
}

#header,#footer{
    height:10%;
    position:relative;
    z-index:1;
}

</style>
</head>
<body>
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div>
<div class="content">
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div>
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div>
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div>
</div>
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div>
</body>
</html>

一个缺点是div必须按特定顺序指定,这对搜索引擎优化和屏幕阅读器都不利;然而,这对于预期的web应用程序并不重要。