固定布局+宽内容=表格？答案

【问题标题】：fixed layout + wide content = tables?固定布局+宽内容=表格？
【发布时间】：2012-03-26 19:29:43
【问题描述】：

我有一个固定宽度布局的网页。它以前使用过表格，我使用 div 重新创建了它。总的来说，我对此很满意（页脚现在很好地粘在了底部）。

但是有一个问题 - 我无法控制内容，有时它可以包含非常宽的元素。在当前（div）布局中，如果元素不适合屏幕，则必须向右滚动（无法避免）并且页面框架结束，您会看到空白区域（即没有页眉、页脚）。

它的原因是div只扩展为可见窗口。

我只看到两种解决方法：

有没有更好的解决方法？我想实现与表格类似的行为，但使用 div。

如果您需要更多信息，请告诉我，谢谢。

编辑：我需要它在 IE6（或者至少 IE7，如果 IE6 看起来不难看）和以上 + 所有现代浏览器上工作。

EDIT2：这是一个示例，您可以在其中看到我在说什么：http://jsfiddle.net/wxrJU/6/。如果您向右滚动，您会看到有空白区域 - div 框架没有展开。如果有人也可以提供在 jsfiddle 中实现的解决方案，我将不胜感激:)。

【问题讨论】：

【解决方案1】：

不费吹灰之力 (sp?) 将使用 CSS2 display: table; 和 table-cell 以及 table-row 值 (IE8+)。

如果您的页眉和页脚在内容很宽时视觉上不够宽，这里有一些选项：

查看名为 faux-columns 的技术并将其应用于创建 faux-rows（对于新词感到抱歉 :)）。
由于您的内容可以是任何高度（与使用假列的固定宽度相反），您必须应用多背景：一个定位为 left top 用于页眉，另一个定位为 left bottom 用于页脚。
CSS3 background-size 将调整背景图像所需的宽度。根据伟大的网站http://caniuse.com 的说法，IE9+ 超过了三分之二的浏览器（除非您的用户使用很多旧的 IE，例如在管理部门或大公司中）。 IE8 见SO polyfill background-size-

编辑：忘记了 CSS3 布局选项。

除了display: table;，您还可以考虑CSS3选项：

【讨论】：

【解决方案2】：

我尚未在 IE6 或 7 中对此进行测试，但它可能正在朝着正确的方向发展...

【讨论】：