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

Question

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

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

原因是div只扩展到可见窗口。

我只看到两种解决方法：

• 回到表格布局。它适用于这种情况 - 如果内容更宽，则会扩展到窗口框架之外。
• 实现JavaScript解决方案，它将检查宽度并在需要时展开它。但我认为这是错误的。

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

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

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

EDIT2：这是一个例子，你可以看到我在说什么：http://jsfiddle.net/wxrJU/6/。如果你向右滚动你可以看到有空格 - divs框架不会扩展。如果有人可以提供在jsfiddle中实现的解决方案，我将不胜感激：）。

Answer 1

一个明智的选择（sp？）将使用CSS2 display: table;以及table-cell和table-row值（IE8 +）。

如果您的页眉和页脚在内容非常宽时视觉上不够宽，可以选择以下选项：

• 查看名为 faux-columns 的技术，并将其应用于创建 faux-rows （抱歉新词语:)）。
  由于您的内容可以是任何高度（与使用faux-column的固定宽度相反），您必须应用多个背景：一个定位为left top用于标题，另一个定位为left bottom用于页脚
• CSS3 background-size会将背景图片调整为所需的宽度。 IE9 +根据伟大的网站http://caniuse.com，超过三分之二的浏览器（除非您的用户使用很多旧的IE，如管理或大公司）。有关IE8的信息，请参阅SO polyfill background-size -

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

您可以考虑使用CSS3选项代替display: table;：

• Flexible Box Layout Module（应该适用于50-60％的用户，因为它是IE10 +，存在polyfills）
• Multiple column layout（与flexbox相同：IE10 +，存在polyfills）
• 对于网格布局来说太快了（现在只能在一个浏览器上运行：IE10）

Answer 2

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

http://jsfiddle.net/wxrJU/10/