【发布时间】：2010-09-06 15:26:16
【问题描述】：
我正在寻找一种方法来创建具有 5 个区域的纯 CSS（无 JavaScript）布局，如下所示：
┌────────────────────┐
│ 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> 进行布局，这非常容易做到。但我一直在读到，使用表格进行格式化是一件坏事，而 CSS 是要走的路。
我知道有 W3C 工作组致力于通过使上述布局非常易于实现的功能来扩展 CSS 标准。然而，这些标准扩展目前还没有被大多数浏览器实现。我需要一个适用于当前浏览器的解决方案。
我一直在查看许多包含示例 CSS 布局的网页，但没有一个可以完成我上面描述的操作。这些布局中的大多数不是全高，或者列具有不同的高度，或者它们需要 JavaScript。
因此，我的问题是：是否可以仅使用 CSS（没有 JavaScript、没有假列、没有 <table>）来创建上述布局？当然，该解决方案应该适用于当前的 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 应用程序并不重要。
/弗兰克
【问题讨论】：
-
找不到任何有关如何执行此操作的文献是有原因的 - 因为这样做没有实际目的！ 高度或宽度的流体很有用。 both 的流体是愚蠢的。您肯定已经看到有关屏幕尺寸及其对网页设计和开发的影响的讨论。即使这在技术上是可行的，创造一个适合这一点的设计也几乎是不可能的。很容易指出这种事情是为什么我们仍然需要表格进行布局，（以及问题的措辞方式，它可能是）但它不是 - 不是这种不切实际的东西。
-
您可以在桌面应用程序的世界中找到这种布局：只需看看 Outlook、Visual Studio、Eclipse 等。 Outlook Web Access 等 Web 应用程序也有这种布局（当然是
<table>）。因此，我认为这是一个实际的目的。 -
@fmunkert Web 应用程序使用 Javascript - 实际上，没有人在这种受限条件下工作
-
@fmunkert：我刚刚阅读了您的最新编辑。您输入的代码在 FF 中运行良好，但在 IE8 中，所有部分（文本区域）中都有滚动条。您可能需要添加“溢出：隐藏；”在你的 textarea CSS 规则中隐藏它们 :)