html - 固定布局 + 广泛内容 = 表格？

Question

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

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

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

我只看到两种解决方法:

• 返回表格布局。它在这种情况下工作正常 - 如果内容更宽，它会扩展到窗口框架之外。
• 实现 JavaScript 解决方案，该解决方案将检查宽度并在需要时进行扩展。但我认为这是错误的。

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

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

编辑:我需要它在 IE6(或者至少 IE7，如果 IE6 看起来不丑的话)和更高版本 + 所有现代浏览器上工作。

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

Answer 1

一个不费吹灰之力(sp？)的方法是使用 CSS2 display: table; 以及 table-cell 和 table-row 值(IE8+)。

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

• 查看称为仿列 的技术并应用它来创建仿行(对新新词感到抱歉 :))。
  由于您的内容可以是任何高度(与使用假列的固定宽度相反)，您必须应用多背景:一个定位为 left top 用于标题，另一个定位为 左下角用于页脚。
• CSS3 background-size 将背景图像调整到所需的宽度。 IE9+根据大网站http://caniuse.com那是那里超过三分之二的浏览器(除非您的用户使用很多旧的 IE，例如在管理部门或大公司中)。参见 SO polyfill background-size对于 IE8-

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

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

• Flexible Box Layout Module (应该适用于 50-60% 的用户，因为它是 IE10+，存在 polyfill)
• Multiple column layout (与 flexbox 相同:IE10+，存在 polyfill)
• Grid Layout 太早了(目前只能在单一浏览器上运行:IE10)