設置overflow-x：hidden添加一個垂直滾動條

當我在水平和垂直兩個方向都溢出的元素上指定overflow-x: hidden時，除了隱藏水平溢出的內容之外，元素還會獲得一個垂直滾動條。我試過加入overflow-y: visible甚至只是overflow: visible，沒有效果。設置overflow-x：hidden添加一個垂直滾動條

我誤解了這些屬性的作用嗎？我認爲overflow-x應該不會影響垂直溢出。

這發生在我試過的每個瀏覽器上。

下面是一個演示效果的代碼片段。我使用<pre>標記，因爲它們是創建溢出內容的簡單方法，但它似乎會發生在任何標記中。

pre { 
 
    height: 40px; 
 
    width: 150px; 
 
    margin-bottom: 50px; /* We need this so they don't overlap. */ 
 
} 
 

 
#x-hidden { 
 
    overflow-x: hidden; 
 
} 
 

 
#y-visible { 
 
    overflow-x: hidden; 
 
    overflow-y: visible; 
 
} 
 

 
#visible { 
 
    overflow: visible; 
 
    overflow-x: hidden; 
 
}

<pre> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. 
 
    Integer mollis quis magna quis vulputate. 
 
    Cras aliquet convallis efficitur. 
 
</pre> 
 

 
<pre id="x-hidden"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. 
 
    Integer mollis quis magna quis vulputate. 
 
    Cras aliquet convallis efficitur. 
 
</pre> 
 

 
<pre id="y-visible"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. 
 
    Integer mollis quis magna quis vulputate. 
 
    Cras aliquet convallis efficitur. 
 
</pre> 
 

 
<pre id="visible"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. 
 
    Integer mollis quis magna quis vulputate. 
 
    Cras aliquet convallis efficitur. 
 
</pre>

的W3C spec說：

'溢出-x' 和 '溢出-Y' 的計算值是與它們的指定的值，不同的是一些組合與'可見'是不可能的：如果一個被指定爲'可見'，另一個'滾動'或'自動'，則'可見'被設置爲'自動'。

但是，這並沒有提及的情況下，當overflow-x或overflow-y設置爲hidden，這對我來說意味着這個組合確實意味着是可能的。

來源

2011-05-30 Will Kunkel

您可能想要在jsfiddle.net上粘貼一些示例代碼:) – 2011-05-30 19:00:48

x軸=水平。 y軸=垂直。 – MarioRicalde 2011-05-30 19:00:54

我剛遇到這個問題。我們的設計人員想要創建「流」出右邊的圖形。所以我允許圖像溢出容器div，但然後我設置爲全角行的隱藏溢出剪輯圖像，並防止整個頁面的水平滾動條。接下來，我還有一個.row :: after元素，它創建一個陰影並使用絕對定位將它推到行的下方，隱藏的溢出將隱藏。溢出-x隱藏; overflow-y：visible創建一個滾動條。我想要x剪輯，並且y沒有滾動條而溢出。類似於海報的問題。 – 2014-03-25 18:05:06

-4

讀你的問題......我看不出有什麼問題......

WHE我指定溢出-X：隱藏;在一個元素上，它添加了一個垂直滾動條。

如果它溢出了它的高度（正如你剛纔所說的那樣），那就很正常了。

我已經嘗試添加overflow-y：visible;甚至只是溢出：可見，無效。

嗯......這是正常的，因爲你告訴它顯示一個垂直滾動條，到現在爲止。

正如kuloir所說：X = horizontal; Y =垂直。

來源

2011-05-30 19:05:51 RobinJ

我不告訴它添加一個垂直滾動條。這將是溢出 - Y：滾動。我告訴它只是出現在它的框外，但它是添加一個滾動條。 Overflow-x：hidden應該隱藏任何水平出去的內容，但它也會添加一個垂直滾動條，這意味着它也會影響垂直溢出。 – 2011-05-31 20:30:31

我遇到了同樣的問題。這個問題http://stackoverflow.com/q/6421966/586748解釋*爲什麼*這種情況發生，但我仍然沒有找到解決方法。你有沒有運氣？ – Russell 2011-10-21 10:31:53

-1

也許你誤解了一些東西，我沒有解決這個問題......或者問題不在溢出設置中。

Overflow: auto只會在需要時添加滾動條（內容大於容器）。 Òverflow: visible將添加滾動條。 Òverflow: hidden不會添加滾動條。

我明白你希望隱藏x內容，所以overflow-x: hidden，但從你的問題，我覺得不希望垂直滾動條看到垂直溢出的內容。

也許問題是被設置用於所述容器的固定高度（或最大高度）和含量較大。刪除高度（或最大高度），您將避免垂直滾動條。

...或者，也許我說的，只是不明白什麼是理想的效果。

來源

2013-12-20 12:00:23

試試這個：

height: auto; 
width: 100px; 
overflow: hidden;

應保持元件的100像素寬，並允許它根據其內容（沒有滾動條）垂直擴展。

來源

2014-01-22 12:34:28

首先，this fiddle顯示了您所描述的問題。

到目前爲止，我不知道如何解決這個問題，但它似乎像spec hints to this here：的「overflow-x」

的計算值和「overflow-y」是一樣的其指定的值，不同之處在於某些組合以「可見」是不可能：如果一個被指定爲「可見的」，另一個是「滾動」或「自動」，則「可見的」被設置爲「自動」。

來源

2014-01-22 13:28:32 Danield

嘗試設置你的高度。要麼讓喜歡100％，或自動檢查這個

jsfiddle

height: auto;

來源

2014-02-06 18:36:01 Joe

嘗試設置顯示屬性？溢出聲明適用於塊級元素！

來源

2014-03-25 17:28:49 Kraken

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – 2014-03-25 17:49:41

那是不是答案？ – Kraken 2014-03-25 17:50:47

這是一個輔助問題，然後是評論。 http://stackoverflow.com/help/how-to-answer會給你一些關於如何提供良好答案的提示。 – 2014-03-25 17:54:49

只需使用overflow：隱藏在大小受限的包裝div上。請原諒我的格式今天有些匆忙。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.hidden 
{ 
background-color:#00FF00; 
width:100px; 
height:100px; 
overflow:hidden; 
} 
div.overflowing 
{ 
width:300px; 
height:200px; 
} 
</style> 
</head> 

<body> 
<p>overflow:hidden</p> 
<div class="hidden"> 
<div class="overflowing"> 
You can use the overflow property when you want to have better control of the layout. The default value is visible. 
You can use the overflow property when you want to have better control of the layout. The default value is visible. 
You can use the overflow property when you want to have better control of the layout. The default value is visible. 
You can use the overflow property when you want to have better control of the layout. The default value is visible. 
</div> 
</div> 
</body> 
</html>

看到它在這裏的行動：http://jsfiddle.net/4PZC9/

來源

2014-03-25 17:39:01 tremor

-1

試試這個，

height: auto; 
overflow:hidden;

乾杯。

來源

2014-03-31 18:49:16 user3482296

滾動條需要固定高度 – SagarPPanchal 2014-04-01 11:05:38

看看這個回答一個相關的問題：https://stackoverflow.com/a/6433475/3583023

它解釋了爲什麼

el { 
    overflow-x: hidden; 
    overflow-y: visible; 
}

呈現爲

el { 
    overflow-x: hidden; 
    overflow-y: auto; 
}

通常呈現相同

el { 
    overflow-x: hidden; 
    overflow-y: scroll; 
}

，因爲在大多數瀏覽器中的auto值是scroll。

因此，爲了達到這個效果，我們不能使用overflow-x/overflow-y屬性。我已經試驗了clip財產的潛在替代，但至今沒有運氣：http://jsfiddle.net/qvEq5/

來源

2014-04-30 06:32:38 unruthless

什麼是一個不幸的問題，誰的答案是「你不能」。這樣的恥辱，但謝謝你展示我的問題是不可能的！ – mix3d 2015-09-10 15:27:56

就在一小時前，我有類似的問題，除非我已經指定overflow的價值爲auto出現問題。我沒有使用overflow-x或overflow-y，我只是需要它來完全包含我的兩個浮動在兩端的列表。

對我而言有效的是我將overflow的值更改爲hidden。試試看。我已將max-width設置爲100%，而不是指定高度，我只是使用overflow: hidden。

希望有所幫助。

來源

2015-08-18 12:20:50

我遇到同樣的問題。問題是我們試圖只在一個軸上減少溢出。 IE：用'overflow-x：hidden'中斷水平溢出，使用'overflow-y：visible'來讓東西掛在邊上。但是，當使用這個特定的組合時，它會導致滾動條顯示。這就是問題。 – mix3d 2015-09-10 15:24:34

設置overflow-x：hidden添加一個垂直滾動條

回答

相關問題