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

Question

当我将页眉和页脚设置为 100% 时，我在 FF4、Safari 5 和 Mac OS X 上的 Chrome 12 中出现一些奇怪的行为。如果我的浏览器窗口具有高分辨率并缩小水平滚动条，即使尽管内容应随浏览器窗口缩放。

我看到这个线程似乎有类似的问题，但用户似乎从未找到解决方案: CSS 100% width on browser resize

Overflow-x 对我不起作用，因为绝对定位的错误标签将表现为固定定位。

此处演示(模糊错误):

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

提前致谢

Answer 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>