宽度:窗口大小调整(CSS)时调整大小100%

时间:2011-08-18 21:36:26

标签: css scroll width overflow

当我的页眉和页脚设置为100%时,我在Mac OS X上的FF4,Safari 5和Chrome 12中出现了一些奇怪的行为。如果我的浏览器窗口处于高分辨率并将其缩小,则会出现水平滚动条,甚至虽然内容应该随浏览器窗口缩放。

我看到这个线程似乎有类似的问题,尽管用户似乎从来没有找到解决方案: CSS 100% width on browser resize

溢出-x对我不起作用,因为绝对定位的错误标签将表现为固定位置。

这里的演示(模糊错误):

http://kassekladde.tixz.dk/kontakt-os/

提前致谢

2 个答案:

答案 0 :(得分:1)

问题是由#overlay引起的。您已设置visibility:hidden。这会隐藏内容但允许它仍然占用页面上的空间。如果您将其更改为display:none,则会隐藏内容及其占用的空间,在此过程中停止滚动条。

随着页面缩小,

#overlay动态地给出宽度/高度。正如您在下面看到的,它在某一点达到了width:1711px,因此出现了滚动条:

<div id="overlay" class="overlay" style="width: 1711px; height: 1489px; visibility: hidden; opacity: 0; position: absolute; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; top: 0px; z-index: 5000;"></div>

答案 1 :(得分:0)

查看CSS&amp; html,页眉和页脚都在一个带有'容器'类的div中,它被定义为980px的宽度,所以两者都只会缩小,直到达到980px的宽度,这是我在我在Windows 7中测试过的浏览器(抱歉无法访问MacOSX)。您是否看到了不同的东西,或者您是否试图将它们缩小到不到980px?如果后者是真的,那么你需要将它们从容器类中拉出来。