當溢出時，箭頭消失：自動元素被添加到其他div

當我添加溢出時，指示框中的箭頭消失：自動元素到其他div。以下是代碼：當溢出時，箭頭消失：自動元素被添加到其他div

CSS：

<style> 
.arrow_box { 
position: relative; 
background: #FFF; 
box-shadow:0 0 5px rgba(0,0,0,0.4); 
width:500px; 
border:0px; 
} 
.arrow_box:after, .arrow_box:before { 
bottom: 100%; 
left: 73%; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.arrow_box:after { 
border-color: rgba(136, 183, 213, 0); 
border-bottom-color: #FFF; 
border-width: 15px; 
margin-left: -15px; 
} 
.arrow_box:before { 
border-color: rgba(194, 225, 245, 0); 
border-bottom-color: #dadee0; 
border-width: 18px; 
margin-left: -18px; 
} 
#livecart{max-height:500px;overflow-y:auto;} //Without overflow it works fine 
#inicart{top:0px;} 
</style>

HTML：

<div class='inicart'> 
<div id='livecart' class='arrow_box'> 
... 
... 
... 
</div> 
</div>

Livecart格顯示在懸停事件&如果它的高度越過最大高度元素，滾動條應該進入畫面，這是必要的。但是這又會使箭頭從屏幕上消失。任何想法爲什麼發生這種情況？對於這個特殊問題有什麼解決方法？

這裏的jsfiddle鏈接 http://jsfiddle.net/nNJSy/2/

你可以嘗試刪除溢出：自動從 '#livecart' &看到箭頭就會出現。

來源

2014-05-20 Shanil Soni

沒有足夠的信息以幫助我們診斷問題。現場演示將極大地幫助我們在您的情況下提供幫助 –

我在我的問題中添加了jsfiddle。你可以通過它。 –

問題是，overflow:auto將使該元素嘗試添加滾動條以適應寬度/高度中不可用的任何寬度/高度。滾動顯示可見區域外的任何內容。

但是，該行爲不會影響僞元素，因此滾動條不會添加到父級。

爲了使僞元素箭頭可以看出，您必須對父，#livecart使用overflow:visible，like so

如果必須overflow:auto（比如元素有內容），那麼你需要騰出空間通過使用填充在元素中箭頭，在這種情況下添加padding-top:30pxlike so

要看到每個類型的溢出效應，check this out

來源

2014-05-21 07:52:23

應用填充屬性將另一個30px區域添加到框的右側和頂部。所以最終它看起來像一個盒子裏面的箭頭框。不知道爲什麼會這樣，讓我玩一下。 –

@ShanilSoni這是因爲它正是它在做什麼，它爲塊的頂部增加了更多的空間。這是唯一的方式有'溢出自動'頂部的箭頭雖然... –

哦，謝謝無論如何幫助在這，我的要求不適合CSS，我猜:( –

當溢出時，箭頭消失：自動元素被添加到其他div

回答

相關問題