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

今天我遇到了一个非常棘手的问题，我需要做一个网站的前端布局，它在页面上有一个特定的设计元素，这让我很困惑

现在我对html、css定位、布局等并不陌生，所以请不要对我如何解决这个问题进行“猜测”。我想要一个有效的例子

下面是我的代码和问题： http://jsfiddle.net/sg3s/A9vzA/

当前正在发生的事情

#容器的最小高度为100%（红色背景）宽度970px。这是页面必须具有的最小宽度。
#top
（浅棕色背景）div与问题无关，只是设计的一部分

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

我希望发生的事情

我希望
#header
over
#container
的“溢出”在两侧消失，并且在视口宽度低于970px时仅获得一个滚动条。（如果有人可以重新表述）

让我更清楚一点：

100%高度的布局需要保持并与IE7兼容+
标题需要居中于容器上方，这就是为什么在我的示例中它位于容器内部的原因，但如果这解决了问题，请随意将其取出。
只要视口足够大，足以容纳标题，我的示例的外观和行为都是正确的
诀窍是当视口太细而无法容纳该标题时，使标题的侧面溢出到视口的侧面时，使其外观和动作相同
更新了示例，使更改/居中更加明显

如果可能的话，我希望布局能够一直支持IE6，尽管IE7+也可以。最后一页将提示安装Chrome框架。当然，别忘了Chrome，FF 3.5+。。（歌剧？）。使用JS是不可接受的，除非你能说服我绝对没有其他方法，但是jQuery将出现在页面上

谢谢你至少试了一下！（挑战你自己！：D）
这是一个困难的问题，我能想到的唯一真正的解决方案是，你可以使用这样的媒体查询：

@media all and (min-width: 970px) {
  body, html {
    overflow-x: hidden;
  }
}

旧的浏览器不支持它，在那里你需要一个Javascript
 如何将标题设置为最小宽度为970px，最大宽度为1022px？有ie黑客使最小和最大宽度工作。这将使滚动条在视口收缩到低于970后出现，并且当您拉伸视口时，标题将增长到1022，之后将保持1022
 这个是镀铬的


在#标题内放置一个内部div

收割台具有相对位置且无浮动，并且具有970px

内部div的位置固定，宽度为1022px，边距为0-26px

--编辑

但在IE7中不起作用

--编辑

这也适用于IE7，只需添加另一个内部div

第一个内部div的位置固定，宽度100%，文本居中对齐

第二个内部div是边距0 auto和宽度1022px

有人能在IE6中测试它吗

--编辑

不，如果您的容器中有内容，则此选项无效。位置固定是没有选择的
这段代码在FF/Chrome/Safari/Opera中对我有效。无法在IE中测试，因为我现在在Mac上，但必须在IE 7中工作+

例如：

基本思想是将#头包装在另一个“宽度：100%；最小宽度：970px；”的容器中，然后放在#容器的外部，这样它会对您造成所有溢出

编辑2:适用于IE6的解决方案：

编辑3:此版本在现代浏览器和旧IE中固定为100%高度：
据我所知，最好的解决方案是重新构造HTML，将标题放在容器外

<div class="outer">
    <div class="header">
        ...
    </div>
    <div class="container">
        ...
    </div>
</div>

演示：
sg3s，你听起来像个强硬的顾客，但我想我应该参加比赛。我们没有人确切地了解你需要什么，所以请张贴扁平的设计

我的假设是，在固定的960px内容容器后面需要一个或两个宽度可调的层。在宽度可调的容器上使用
float
，几乎不可能实现您想要的操作。相反，对于容器支架（也称为包装器）使用
position:absolute
，对于内部内容容器使用
position:relative
。不需要Javascript

我的建议是从主内容容器中删除#标题，并将背景图像与#标题分离，以便它们可以独立渲染和定位


#标题
位于外部和上方（带有
z-index
）
#顶部
。它还获得
边距：0自动
和背景位于
顶部中心
，最小宽度为970px

和

最大宽度为1022px

#header {
    margin: 0 auto;
    z-index:5;
    min-width: 970px;
    max-width: 1022px;
    height: 201px;
    background: #390419;
    overflow:hidden;
    background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}

---

这就是你想要的：

http://jsfiddle.net/HbxTQ/8/

全屏：

http://jsfiddle.net/HbxTQ/8/embedded/result/

---

（我还没有做过跨浏览器测试，只是在Chrome上测试过。如何确保我的想法是正确的。）

你想固定标题吗？你最好使用position:fixed，它是IE6JS的替代品。我不希望有一个

position:fixed

，它可以滚动，而其余的内容会一直保持在视口的顶部，如果这是你的意思：）标题的内容是什么？你能把左边和右边分开吗

http://jsfiddle.net/HbxTQ/8/embedded/result/