絕對定位的權利導致滾動條，當左邊沒有

我試圖「側面」與一些設計元素，絕對定位在主div的寬度以外的居中div。我得到一個滾動條，因爲右側的元素，而不是左側的元素（IE6/7/8，Chrome，Firefox）。我怎樣才能擺脫水平滾動條？絕對定位的權利導致滾動條，當左邊沒有

<html> 
<head> 
<style type="text/css"> 
    html, body { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
    } 

    body { text-align: center; } 

    .wrapper { 
     margin: 0 auto; 
     position: relative; 
     width: 960px; 
     z-index: 0; 
    } 

    .main { 
     background: #900; 
     height: 700px; 
    } 

    .right, .left { 
     position: absolute; 
     height: 100px; 
     width: 100px; 
    } 

    .right { 
     background: #090; 
     top: 0px; 
     left: 960px; 
     z-index: 1; 
    } 

    .left { 
     background: #009; 
     top: 0px; 
     left: -100px; 
     z-index: 1; 
    }   
</style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="main"></div> 
     <div class="left"></div> 
     <div class="right"></div> 
    </div> 
</body> 
</html>

來源

2010-02-17 Michael Snyder

我在Mac上看不到Chrome和Firefox上的滾動條。你使用的是什麼文檔類型？ – 2010-02-17 21:38:50

我正在使用這個（下面），而我是個人電腦...沒有檢查任何Mac版本的瀏覽器。 <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> – 2010-02-17 21:57:38

您的身體未設置爲相對。

來源

2010-02-18 04:56:50

不可以。我仍然有這個問題。 – 2010-02-22 21:52:16

不知道你想用這個做什麼，我可能會在身上設置一個背景圖像。

來源

2010-03-01 09:58:47 mistalaba

讚賞，我可能不得不走那條路;我一直在試圖避免它。 – 2010-03-01 14:13:47

如果你沒有顯示任何將要與之交互的內容，那麼去那條路線肯定沒有錯誤。 – 2010-03-01 14:35:00

背景圖像（居中）是最好的選擇，假設你沒有左右的內容（因爲不知道它們是否被隱藏）。背景圖像將僅包含左側和右側顏色/圖像，並且會比目標監視器寬度更長。 – bcm 2010-07-05 12:47:33

只有當視口比主要加上右邊框更薄時，你纔會得到滾動條，對吧？（不要認爲這對某些人來說很清楚。）這是瀏覽器對內容溢出的行爲。

根據你想發生什麼（爲什麼你希望它在這種情況下消失，如果你這樣做？），你可以設置overflow：隱藏在.wrapper上。這將永遠隱藏它 - 如果你想在其他事件上動態顯示它，那就行了。

但是，如果我沒有弄錯，你只是不希望它顯示時，他們的視口只有960px寬。 AFAIR你不能沒有一些js/jQuery。我的建議實際上是 - 特別是如果你不想混淆javascript - 如果你想讓這些內容可見，那麼接受窄寬度的滾動條。它可能讓你成爲一名設計師，但大多數人不會注意到它，而那些做的人仍然可以訪問你的內容 - 這是一個勝利，對吧？

來源

2010-03-01 10:19:06

你是說內容溢出的預期行爲只會導致滾動條溢出內容在右側？因爲這就是發生在這裏的事情。問題是滾動條只是由右側的框引起的;左邊的框應該引起同樣的問題，但它不會。因此，左邊的處理與右邊不同，或者有一種方法可以讓右側不會影響橫向寬度。不幸的是，將滾動條視爲一個缺陷的權力（如我）。希望我可以忽略它。 – 2010-03-01 14:12:11

我不知道規範對此有何評論，但從經驗來看，頂部和左側溢出的處理方式不同。這就是爲什麼我們可以使用left：-99999em和top：-999em等隱藏不需要的元素。如果你想解決這個問題，我建議使用一些JavaScript。 – 2010-03-01 14:30:36

（或使用背景圖片） – 2010-03-01 14:35:58

我有一個解決方案，不能在IE7/IE6中工作，但似乎在其他地方都很好。

在您的<body>標記的內容周圍創建包裝（#bodyInner）。

應用此CSS規則：

#bodyInner { 
    width:100%; 
    overflow:hidden; 
    min-width:960px; 
    }

太糟糕了，你不能只是適用這個<body>元素。

來源

2010-04-16 02:30:48 James

拋出一個overflow-x：隱藏在body標籤上可以在不是IE6/7的任何東西中工作......但對於這兩個瀏覽器，您還需要爲html標籤添加overflow-x：hidden。

因此，使用你現在有這個調整的內容：

html, body { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     *overflow-x: hidden; 
    } 

body { text-align: center; overflow-x: hidden; }

注意「*」的黑客在HTML中使用的原因，身體的聲明是因爲IE8是標新立異。如果你不使用它，IE8也會丟失垂直滾動條，而不僅僅是水平。我不知道爲什麼。但該解決方案應該沒問題。

來源

2010-04-16 03:53:09 RussellUresti

僅供參考，依靠瀏覽器錯誤通常是一個壞主意。 IE瀏覽器支持瀏覽器檢測功能，它不會爲您誤報誤報，或者在最終打補丁時破壞瀏覽器。儘管爲單個CSS行做這件事實際上很痛苦，但請看一下http://www.quirksmode.org/css/condcom.html – pinkgothic 2010-04-23 07:55:21

我知道，這只是簡寫。我總是使用通過IE條件註釋加載的IE.css文件。 – RussellUresti 2011-07-04 18:58:18

將所有元素包裝在div中，使該div位置相對並溢出隱藏。它每次都解決了這個問題。：D

來源

2010-06-23 21:10:13

這適用於IE6-9，FF3.6，Safari 5和Chrome 5.似乎沒有什麼關係，我把它扔到了什麼文檔類型（無，xhtml 1 transitional，html5）。希望這有助於，這是一個有趣的問題。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, 
body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

body { 
    overflow: auto; 
} 
#container { 
    min-width: 960px; 
    zoom: 1; /*For ie6*/ 
    position: relative; /*For ie6/7*/ 
    overflow: hidden; 
    margin: 0 auto; 
} 

#main { 
    background: #cea; 
    width: 960px; 
    margin: 0 auto; 
    height: 700px; 
    position: relative; 
    top: 0; 
} 

#right, 
#left { 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    top: 0; 
    z-index: 100; 
} 

#right { 
    background: #797; 
    right: -100px; 
} 

#left { 
    background: #590; 
    left: -100px; 
}  
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="main"> 
      <div id="left">left</div> 
      <div id="right">right</div> 
     </div> 
    </div> 
</body> 
</html>

來源

2010-07-18 00:53:25 joelpittet

位置：Chrome/Mozilla/Opera中的容器也需要相對位置，但不明白爲什麼 – Dan 2012-10-06 06:32:59

如果頁面語言是從左到右，那麼左邊的非擬合元素不會導致滾動條。

試試這個：

<html dir="rtl">...</html>

這將在頁面的文本方向更改爲從右到左，現在留下的div會造成滾動條，不正確的。

您可以對方向執行相同的操作：rtl css屬性。

如果您希望您的頁面呈現與文本方向無關，那麼您可以以不同的方式排列頁面元素以避免出現這種情況。

來源

2010-07-19 22:28:35

沒有意識到 - 酷的事實！ – atwixtor 2014-01-24 14:59:54

老問題我知道，但可能會幫助別人。下面展開詹姆斯的迴應，但在IE6/7/8/9，FF和Webkit中工作。是的，它使用邪惡的表達，但你可以把它放在IE6特定的樣式表中。

#bodyInner { 
     width: 100%; 
     min-width: 960px; 
     overflow: hidden;  
     width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%")); 
}

來源

2010-10-26 05:15:48

我也需要這樣的解決方案 - 謝謝所有誰建議使用overlow-x隱藏的100％範圍的包裝。但是，我不認爲你必須添加額外的#bodyInner div - 我已經成功地測試了它在Safari，Opera，Firefox，Chrome和IE8中直接應用寬度和溢出屬性。

來源

2010-11-10 19:02:08 Mark

我有一個類似的問題，這是完全撕裂我的頭髮，因爲我發現上述解決方案不適合我。我通過在主容器div之外創建一個div並使用min-width和max-width來提出解決方案來克服這個問題。然而

#boxescontainer { 
    position: relative; 
    max-width: 1100px; 
    min-width: 980px; 
} 

    #boxes {  
     max-width: 1100px; 
     min-width: 900px; 
     height: 142px; 
     background:url(../grfx/square.png) no-repeat; 
     background-position: center; 
     z-index: 100; 
    }

我發現，我還需要使square.png圖像的div的大小，所以我在1100px使其作爲一個透明的PNG。這是我解決問題的方法，希望它可以幫助別人。

在側面說明中，我也在左側使用了一個圖像，其中我使用了與右側沒有相同滾動條問題的絕對定位。顯然，左右兩側確實有不同於我在這件事上做過的研究的性質。

關於使用overflow-x的人：隱藏我不得不不同意這種方法，主要是因爲你正在帶走用戶完全水平滾動的能力。如果您的網站設計爲以1024px的分辨率進行查看，那麼如果您取消了水平滾動的功能，那麼處於800px分辨率的用戶將無法看到您網站的一半。

來源

2011-03-17 01:51:00 Sarah

絕對定位的權利導致滾動條，當左邊沒有

回答

相關問題