好奇宽度100％CSS问题

我刚刚意识到每个浏览器似乎都有一个好奇的渲染问题。好奇宽度100％CSS问题

。请缩放浏览器，直到出现底部滚动条。

。然后滚动到最右边。

你会看到#header不会再有100％的宽度。问题似乎是里面的.wrapper。我需要该包装来限制#headers内容的尺寸。

解决方案欢迎。

2011-09-01 redaxmedia

这不是渲染问题;浏览器遵循规范。 #header的宽度是100％，这是浏览器窗口的宽度。当'.wrapper'超过100％时，它会从'＃header'溢出。你可以按照建议设置'min-width'，或者设置'width'，或者设置'overflow：hidden'来隐藏溢出（但这可能不是你想要的）。 – ThatMatthew

最好的解决方案应该是为身体添加一个最小宽度样式或100％容器 – redaxmedia

将min-width: 980px;添加到标题。

请参阅updated fiddle demo。

在Win7上测试IE7，IE8，IE9，Opera 11.50，Safari 5.0.5，FF 6.0，Chrome 13.0。

来源

2011-09-01 18:44:50 NGLN

不能修复它，对不起 – redaxmedia

确定吗？无论我水平滚动，窗口的整个宽度上面的100px都是灰色的。 – NGLN

这使'＃header'变宽以包含'.wrapper'。这不是你想要的吗？ – ThatMatthew

#header的宽度没有定义，所以它不是100％，它是“auto”。

也许你应该从.foo类中移除“width：600px”？

来源

2011-09-01 18:52:27 galeksic

块元素默认为100％^^ ...并没有.foo只是内容的一个例子。 – redaxmedia

好奇宽度100％CSS问题

回答

相关问题