html - 如何创建一个简单的头/中心/脚布局？

Question

我想做的事情听起来非常简单，但由于某种原因我无法让它工作......我想要一个具有特定大小的 block 元素，它具有三个子 block 元素:一个标题，一个中心区域和一个页脚。它必须具有以下特征:

• 页眉和页脚只占用内容所需的高度。此内容是动态的，所以我不能在这里使用固定大小。因此，假设标题中的文本已本地化。它可以是简短的英文文本(一行)或较长的法文文本(换行成两行)。
• 中心区域占据所有其他空间。我的意思是它真的占据了所有空间，而且它不仅仅是位于中心的顶部。因此，如果中心元素有背景色，那么这种颜色必须对页眉和页脚之间的整个空间可见。或者，如果中心元素是图像，则必须将其拉伸(stretch)到页眉和页脚之间的区域。
• 所有尺寸在创建时都是未知的，因此使用绝对定位不起作用。在中心元素上使用通常的边距技巧也不起作用，因为页眉/页脚的高度是未知的，因为它是动态的。
• 没有 JavaScript 黑客攻击。
• 必须在 IE7+、FF3+、Chrome 和 Safari 中运行。

让我们来看这个示例代码:

<div style="width: 512px; height: 512px">
  <div class="head">This is the header</div>
  <div class="center">This is the center area</div>
  <div class="foot">This is the footer</div>
</div>

最后应该是这样的:

+--------------------------+
| This is the header       |
+--------------------------+
| This is the center area  |
|                          |
|                          |
|                          |
|                          |
|                          |
+--------------------------+
| This is the footer       |
+--------------------------+

我该怎么做？即使使用老式表格并为中心单元格使用 height="100%"我也无法正常工作，因为表格在 IE7 中太大了(中心区域为 512px，因此表格本身为 512px 加上高度页眉和页脚单元格)。

我要搜索的是一些 CSS 代码，使上述 HTML 代码(或任何替代 HTML 代码，甚至允许使用真正的 HTML 表格)如上文所述显示并匹配上面列出的所有条件。

Answer 1

更新

这是另一个 fiddle ... http://jsfiddle.net/zDfHs/

内容不会有 100% 的高度，但您可以使用 JavaScript 更改它。目前，我不知道有什么方法可以通过纯 CSS 实现它。

希望对您有所帮助。
赫里斯托

---

看看这个 fiddle :http://jsfiddle.net/qrUAy/

Matthew James Taylor 的网站实际上非常好，他的布局绝对不是骗局 :) 但您有权发表自己的意见。不管怎样，这是简单的页眉/内容/页脚布局...

http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

希望对您有所帮助。
赫里斯托