我正在寻找一种方法来创建具有 5 个区域的纯 CSS（无 JavaScript）布局，如下所示：
┌────────────────────┐
│ H │
├────┬────────┬──────┤
│ │ │ │
│ │ │ │
│ │ │ │
│ A │ B │ C │
│ │ │ │
│ │ │ │
│ │ │ │
├────┴────────┴──────┤
│ F │
└────────────────────┘
（只有当您的字体具有 Unicode 框线画字符时，上图才能正确显示。）
布局必须完全填充 Web 浏览器中的可用空间（高度和宽度）。
A、B、C高度必须相同； H 和 F 必须具有相同的宽度。即，除了固定边距外，区域之间不能有间隙。
该区域内的元素应该知道其父元素的大小；这意味着，如果我放置
<textarea style="width:100%;height:100%">Just a test</textarea>
在一个区域内，它将延伸到该区域的整个宽度和高度。
浏览器窗口的右侧不应有滚动条（因为H、C、F的高度正好等于浏览器客户区的高度）。
如果您使用的是<table>进行布局。但我一直读到，使用表格进行格式化是一件坏事，CSS 才是正确的选择。
我知道有 W3C 工作组致力于通过功能扩展 CSS 标准，从而使上述布局非常容易实现。然而，目前大多数浏览器并未实现这些标准扩展；我需要一个适用于当前浏览器的解决方案。
我一直在浏览许多包含示例 CSS 布局的网页，但没有一个可以实现我上面描述的功能。大多数布局要么不是全高，要么列具有不同的高度，要么需要 JavaScript。
因此，我的问题是：是否可以仅使用 CSS 创建上述布局（没有 JavaScript，没有假列，没有<table>）？当然，该解决方案应该适用于当前的网络浏览器。
EDIT:基于 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 应用程序来说并不重要。
/ Frank
