html - 如何将 div 定位为可见但不计入文档宽度

Question

今天我遇到了一个非常讨厌的问题，我需要为一个网站做前端布局，它在页面上有一些设计元素让我(甚至)感到困惑。

现在我对 html、css 定位、制作布局等并不完全陌生，所以请不要“猜测”我如何解决它。我想要一个工作示例。

这是一个包含我的代码和问题的 jsfiddle:http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/

目前正在发生什么；

#container 的最小高度为 100%(红色背景)，宽度为 970 像素。这是页面必须具有的最小宽度。 #top(浅棕色背景)div 与问题无关，而是设计的一部分。

问题出在 #header(紫色背景)，它当前的宽度为 1022px(对于 1024px 分辨率来说太宽了 + 滚动条，即使是最大化的窗口)和一个负的左边距以保持它以容器为中心，这是需要发生的事情。当屏幕宽度低于 1022px 时，水平滚动条会出现，因为页面上最薄的元素是 1022px 宽。 (其行为与绝对位置和负向左偏移相同)

我希望发生的事情；

我希望 #header 在 #container 上的“溢出”消失到两侧，并且只在视口(viewport)宽度低于 970 像素时出现滚动条。 (如果有人可以改写这个)

让我更清楚一点:

• 100% 高度布局需要保留并兼容 IE7+
• header 需要在容器上居中，这就是我示例中它位于其中的原因，但如果这样可以解决问题，欢迎我将其取出。
• 只要视口(viewport)足够大以容纳页眉，我的示例看起来和行为都是正确的。
• 诀窍是当视口(viewport)太窄无法容纳该标题时，使其看起来和行为相同，而标题的两侧溢出到视口(viewport)的两侧。
• 更新了示例以使更改/居中更加明显。

如果可能的话，我希望布局一直支持到 IE6，尽管 IE7+ 也可以。最终页面会提示无论如何都要安装 Chrome Frame。当然不要忘记 Chrome、FF 3.5+..(Opera？)。使用 JS 是 Not Acceptable ，除非你能让我相信绝对没有其他方法，但 jQuery 将出现在页面上。

至少感谢您的尝试! (挑战 self !:D)

Answer 1

此代码适用于 FF/Chrome/Safari/Opera。无法在 IE 中测试，因为我现在在 Mac 上，但必须在 IE 7+ 中工作

示例:http://jsfiddle.net/XVraD/3/

基本想法是将#header 包装在另一个容器中，“width: 100%; min-width: 970px;”并放置在#container 之外，因此它会为您完成所有溢出。

编辑 2: 适用于 IE6 的解决方案:http://jsfiddle.net/XVraD/9/

编辑 3: 此版本在现代浏览器和旧版 IE 中固定为 100% 高度:http://jsfiddle.net/XVraD/9/