如何實現只有一個嵌套元素應該溢出它的父母

我正在使用選擇元素的多選jQuery插件。外部div（包含多選框）具有最大高度。如果我打開多重選擇框被切斷，我要向下滾動才能看到所有選項：如何實現只有一個嵌套元素應該溢出它的父母

$('select').multipleSelect();

#outer { 
 
    max-height: 110px; 
 
    overflow: auto; 
 
    background-color: green; 
 
    color: white; 
 
} 
 
#select { 
 
    width: 200px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script> 
 
<div id="outer"> 
 
    <p> 
 
    Below you find a multiple select box that should overflow the outer div. 
 
    </p> 
 
    <label for="select">Multiple select:</label> 
 
    <select id="select"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    </select> 
 
    <p> 
 
    Scroll to the button when the select box is open. 
 
    </p> 
 
    <button> 
 
    Do nothing 
 
    </button> 
 
</div>

JSFiddle

如果我打開多選框所有選項都應該可見。所以選項應該溢出外部div。我怎樣才能做到這一點？

如果我將div.ms-parent的位置設置爲fixed我得到期望的行爲，直到我向下滾動，因爲選擇框是固定的並且未與其他內容一起移動。

在這種情況下使用z-index也不起作用。

來源

2016-10-05 marco235

[顯示溢出隱藏容器外的元素]（http：// stackoverflow。com/q/24301400/1577396） –

@ marco235我用更好的解決方案編輯了我的答案。一探究竟。也許它會幫助你更好。感謝您接受我的答案：D –

我犯了一個樣的舊校園解決方案與JQ（因爲我不是很熟悉multipleselect（）插件）

看到這裏>jsfiddle

代碼：

$('select').multipleSelect(); 
var sTop = $('.ms-parent ').offset().top, 
sHeight = $('.ms-parent ').height() 
$('.ms-drop.bottom').css('top',sTop+sHeight)

CSS

.ms-drop { 
    position:fixed; 
    width:200px; 
}

fo r .ms-drop擺脫它的容器，你需要設置position:fixed它。然後用JQ我計算它的top的位置，找到.ms-parent的offset().top和它的高度。這2個組合給出您的top的位置.ms-drop

希望它有幫助。

編輯：jsFiddle

如果你想ms-drop停留在相同的位置，當你滾動綠色DIV（#outer），你應該添加在您計算的滾動距離的滾動功能內不向下滾動從ms-drop的top位置扣除它，所以它會一直停留在那個位置

，所以你將有以下JQ：

$('select').multipleSelect(); 
var sTop = $('.ms-parent ').offset().top, 
    sHeight = $('.ms-parent ').height() 

$('.ms-drop.bottom').css('top',sTop+sHeight) 
$("#outer").on("scroll",function(){ 
    var oScroll = $(this).scrollTop() 
    $('.ms-drop.bottom').css('top',sTop+sHeight-oScroll) 

})

來源

2016-10-05 07:40:18

如果頁面/ div滾動，我會對起始位置做一些更改。這裏是我的最終解決方案https://jsfiddle.net/8mdxuz1w/21/ – marco235

@ marco235我想你想讓'ms-drop'在滾動時保持在同一位置......直接在' .ms-parent'這就是爲什麼我在滾動上進行編輯 –

該插件的container選項可以實現這一點。嘗試啓動插件這樣的：

$('select').multipleSelect({ 
    container: "body", 
});

https://jsfiddle.net/8mdxuz1w/1/

然後，你需要限制下拉的寬度。

來源

2016-10-05 07:33:52

如何實現只有一個嵌套元素應該溢出它的父母

回答

相關問題