2011-08-18 264 views
1

將頁眉和頁腳設置爲100%時,我在Mac OS X上的FF4,Safari 5和Chrome 12中出現一些奇怪的行爲。如果我的瀏覽器窗口處於高分辨率和縮小水平滾動條會出現,即使內容應該與瀏覽器窗口一起縮放。寬度:調整窗口大小(CSS)時調整大小100%

我看到這個線程這似乎有類似的問題,但用戶似乎從來沒有找到一個解決方案: CSS 100% width on browser resize

溢出-X不爲我工作,因爲錯誤的標籤,這是絕對定位,將表現爲固定位置。

DEMO這裏(上模糊的錯誤):

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

在此先感謝

回答

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> 
+0

Arr是的,你是完全正確的! – Tixz

+0

感謝您的幫助!其他人來到旁邊的旁註; MooTools Element.fade()不設置display:none;當不透明度達到0時,它設置可見度:隱藏; – Tixz

0

看在CSS & HTML後,頁眉和頁腳都是用類 '容器' 一個div內,它被定義爲980px的寬度,所以兩者只能縮小,直到達到980px的寬度,這是我在用Windows 7測試的瀏覽器中看到的行爲(對不起,無法訪問MacOSX )。你看到不同的東西還是你想縮小比980px小?如果後者是真的,那麼你需要將它們從你的容器類中拉出來。

相關問題