瀏覽器上的水平滾動條顯示我的網站右側有空白，是什麼引起的？

我一直在開發這個網站一段時間，今天突然發現我的瀏覽器上的水平滾動條顯示，並允許網站滾動一兩英寸的權利。瀏覽器上的水平滾動條顯示我的網站右側有空白，是什麼引起的？

整個網站只有960px寬，我的屏幕分辨率是1680px很清楚它應該適合大量的空間。

該網站仍然顯示完全相同，但滾動條令我煩惱。我已經嘗試在CSS中使用*選擇器添加邊框，但沒有任何東西似乎突出了額外的英寸。我還使用Google Chrome控制檯來突出顯示網站的不同部分，但沒有一個導致問題。

每個瀏覽器都顯示相同的問題，你有任何解釋嗎？

這是有問題的網站：http://compressmycode.com/

來源

2011-06-27 Nick Brunt

您可能應該在原始問題中發佈了一些相關代碼。現在你似乎已經解決了這個問題，將來讀這些東西的人將沒有任何好處。 – Sparky

該問題尚未解決。閱讀下面第一個答案的評論。問題出在facebook代碼中，所以我不能發佈任何代碼，因爲它不是我的問題。 –

無論如何，我的觀點依然存在**，無論何時**這個問題得到解決，對未來的訪問者而言，沒有**您的**包含的代碼將是無用的。當我首先看時，我認爲它可能是導致這種情況的FB iframe。你難道不能把它做成一個固定的寬度，並相應地定位它？否則，你可以把它放在一個固定寬度的容器div中並將溢出設置爲隱藏。 – Sparky

刪除position:relative你#body-wrapper風格在你的CSS的線31，並使用margin-top:50px代替top:50px

，如果你必須保持position:relative，你也可以只申請一個overflow:hidden你的包裝，以消除任何可能的溢出在那裏，但有一些inherent dangers這樣做。

編輯

經進一步檢查，我發現您的.right DIV是問題。由於某種原因，它正在漂浮在右邊導致你的問題。

來源

2011-06-27 21:38:40 Jason

這是固定的，在WebKit的但不是在Firefox或IE –

我從來沒有得到它的WebKit，這固定它，我在Firefox – Jason

你說得對的'.right'股利。這是造成問題的Facebook代碼。它必須在下面做一些奇怪的事情。添加'overflow：hidden;'對它沒有幫助。有什麼建議麼？ –

，問題就來形成你的JS。如果你禁用它，它完美的作品。

更精確地與Facebook的按鈕： DIV＃體包裝> DIV＃網站標題> div.right> div.fb根> DIV

設置爲overflow：隱藏，解決了這個問題

來源

2011-06-27 21:37:41 meo

真的嗎？我根本不會推薦它，它也會阻止垂直滾動！至少使用'overflow-x：hidden'，但即使這是最後的手段。 –

你的權利這是一個不好的解決方案。但這是我能想到的唯一的東西。我正在調查它來自哪裏，很快更新我的答案 – meo

@Chris Francis：好？ ;） – meo

我有類似的問題。沒有任何東西看起來超出寬度，但底部仍然有一個滾動條。

我的頁面的結構是：

<body> 
    <div id='appContainer'> 
    <div class='page'> 
     <div>All the content along with "Youtube video" 
      which meant there was 
      an iframe within my page, 
      some other stuff like *sharethis buttons, 
      Which meant i had to add a few scripts.</div> 
     <div>more stuff</div> 
     <div>more fancy stuff</div> 
     <div>some more stuff with shadows and floating elements</div> 
    </div> 
    </div> 
</body>

* sharethis：http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs

我不共享CSS，因爲是在外部水平和頂無非箱陰影等保證金。

雖然我會分享如何解決問題。我給

<div class='page'></div>

CSS：

.page{ 
    overflow: hidden; 
}

這種固定的滾動問題對我來說。雖然修復只是找到正確的父母，並給它以上CSS

我仍然想知道滾動的根本原因。如果你有它，請分享這些知識。

來源

2013-11-08 06:56:44

瀏覽器上的水平滾動條顯示我的網站右側有空白，是什麼引起的？

回答

相關問題