如何实现只有一个嵌套元素溢出它的父元素

Question

我正在为select元素使用多选择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也不起作用。

Answer 1

我用JQ做了一种老式的解决方案(因为我对乘法选择()插件不太熟悉)

见此处> 小提琴

代码：

$('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;
}

为了使.ms-drop脱离它的容器，您需要将position:fixed设置为它。然后用JQ计算出它的top位置，通过求出.ms-parent的offset().top和它的高度。这两个组合给出了您的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)

})

Answer 2

这个插件上的container选项实现了这一点。尝试像这样启动插件：

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

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

然后，您需要限制下拉列表的宽度。