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

Question

今天我遇到了一个非常讨厌的问题,我需要为网站制作前端布局,并且页面上有一定的设计元素让我感到困惑(甚至).

现在我并不完全不熟悉html,css定位,制作布局等,所以请不要"猜测"我如何解决它.我想要一个有效的例子.

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

目前正在发生什么;

在#container具有970像素100%(红色背景)宽度的最小高度.这是页面必须具有的最小宽度.该#top(lightbrown背景)DIV是无关紧要的问题,但设计的一部分.

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

我想要发生什么;

我想要的"溢出" #header在#container给dissapear到侧面和视口下方得到宽970像素只获得了滚动条.(如果有人可以改写这个)

让我对此更清楚一点:

• 100%高度布局需要保持并与IE7 +兼容
• 标题需要以容器为中心,这就是它在我的示例中的内部原因,但如果能解决问题,请将其取出.
• 只要视口大到足以支持标题,我的示例就会显示正确的行为.
• 当视口太小而不适合该标题时,诀窍是使其外观和行为相同而标题的两侧溢出到视口的两侧.
• 更新了示例,使更改/居中更加明显.

如果可能的话,我希望布局能够一直支持到IE6,尽管IE7 +会很好.最后一页将提示安装Chrome Frame.而且当然不要忘记Chrome,FF 3.5+ ..(Opera？).使用JS是不可接受的,除非你能说服我绝对没有办法,但jQuery将出现在页面上.

谢谢至少尝试!(挑战自己!:D)

Answer 1

这是一个很难的,我能想出的唯一真正的解决方案是你使用这样的媒体查询:

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

旧浏览器不支持它,你需要一个Javascript!

Answer 2

这段代码在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/