【问题标题】:Width:100% resize on window resize (CSS)宽度:100% 调整窗口大小 (CSS)
【发布时间】:2011-10-30 04:13:57
【问题描述】:

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

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

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

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

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

提前致谢

【问题讨论】:

    标签: css scroll width overflow


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

      问题是由#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>
      

      【讨论】:

      • 感谢您的帮助!其他人的旁注; MooTools Element.fade() 没有设置 display:none;当不透明度为 0 时,它设置可见性:隐藏;
      猜你喜欢
      • 2012-12-15
      • 1970-01-01
      • 2011-04-17
      • 1970-01-01
      • 2014-11-10
      • 1970-01-01
      • 1970-01-01
      • 2011-05-21
      • 1970-01-01
      相关资源
      最近更新 更多