如何擺脫底部的水平滾動條？

我已經嘗試調整溢出屬性並更改圖像的寬度，但滾動條仍保留在屏幕的底部。

有誰知道是什麼原因導致這種情況以及如何阻止這種情況？

2012-02-13 imjp

問題在於你的.slideshow定義（style.css：199 ...）。

瀏覽器試圖解決下式：

left 
+ margin-left 
+ border-left-width 
+ padding-left 
+ width 
+ padding-right 
+ border-right-width 
+ margin-right 
+ right 
= parent width

和失敗，因爲left是50％，並且width爲100％。您使用margin:-800px對顯示寬度爲1920px的設備無效，因爲（1920 * 1.5 - 800）爲2080，因此對於此尺寸的設備而言太寬。

改爲使用下面的定義，因爲它會隱含地創建一個width爲100％的元素。請參閱CSS Positioned Layout Module Level 3: Section 7.1。請記住，即使使用上述技術，顯示寬度小於1024像素的用戶也將擁有滾動條。對於這個問題嘗試body{overflow-x:hidden;}。

你的舊代碼（不要只使用它完成！）：

.slideshow{ 
    z-index: -9999; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 100% !important; 
    margin-left: -800px; 
}

來源

2012-02-13 20:53:26 Zeta

**終於有人得到根本原因** +1 ..。也許還會在第199行顯示CSS規則。這是一個混亂......剩下：50％; margin-left：-800px;如果發現自己使用巨大的負邊限來補償別的東西，也許最初的方法需要從頭開始重新檢查。 – Sparky 2012-02-13 21:00:09

@ Sparky672：包含舊代碼並添加了一點解釋。我真的不知道爲什麼這麼多人試圖使用過於簡單的黑客（對你們沒有冒犯性），當問題顯然存在於可能是寶貴的css代碼的脆弱線條之間時... – Zeta 2012-02-13 21:09:51

我認爲它總是最好的爲了知道_你爲什麼必須做一些事情，而不是重新設置所有CSS規則和隱藏溢出的一攬子方法。認真思考一下......每當你應用自己的規則時，你基本上都會「重置」默認的CSS。當三行後面應用'margin：0;'將'p'應用於'p'時，你只會將自己的邊距應用於'p'，這是荒謬的。 – Sparky 2012-02-13 21:15:38

這應該擺脫它，只是在devtools嘗試。

body { overflow-x: hidden; }

來源

2012-02-13 20:43:32 elclanrs

overflow-x:hidden; 
overflow-y:auto;

應該這樣做。

，或者是在安全方面，在包括可能不支持該瀏覽器：

overflow:auto; 
overflow-x:hidden;

來源

2012-02-13 20:43:53

是的，這基本上解決它=） – imjp 2012-02-14 12:39:16

你可以做Pallazzo先生說，但這將砍掉所有內容到右側（即你現在必須滾動才能看到）你可能不想要的。請好好看看包裝div的寬度規格等。你的div叫wraper有width設爲1003px。最好不要以絕對的方式設置尺寸，而應使用百分比。

來源

2012-02-13 20:48:38

如何擺脫底部的水平滾動條？

回答

相關問題