css - 3 个使用 DIV 的固定列（页眉和页脚），无绝对 DIV，IE 友好，所有列均等拉伸

Question

从左到右，Col1 id 560px 宽，10 px 填充，中间列，250px 宽，5px 填充，Col3（侧边栏）是 200px 宽，3px 填充。背景颜色，无论任何列中的文本长度应垂直相等。没有 javascript (jQuery 变通办法) 使它工作。它需要是带有 CSS 的纯语义标记。每个 Column 都应该有一个嵌套的颜色列，内容会去。第 1 列应该是 SEO 突出的，这意味着 Google 和其他搜索引擎可以抓取的最高嵌套列。我使用了“圣杯”布局，“A List Apart”中的文章，这些解决方案非常复杂，以至于它们将主列向左推，而嵌套列则用填充将它们向右推。这太疯狂了！我试着调整这些例子，但他们

Answer 1

已知的解决方案很复杂，因为不幸的是，您所描述的内容在 HTML5/CSS3 之前的版本中并不容易实现。这不是疯狂，而是最先进的。在 A List Apart 中开发和描述解决方案的人是解决这些问题的权威行业专家。

我们最好的选择是要么使用 JavaScript 计算列大小并在运行时进行布局，要么满足于纯 CSS 解决方案所需的手动调整。对于大多数网站，我建议使用 JS，因为良好的列布局可以被认为是一种“增强”——垂直布局的语义标记仍然可读，并且经过 SEO 优化，启用 JS 的客户端可以逐步增强该标记以获得漂亮的, 3 列的演示文稿。

如果您的网站是面向公众的并且具有典型的人口统计分布，那么您会看到大约 90% 的人启用了 JS，而剩下的 10% 则习惯于网站不太漂亮或看起来不太正确。