Question

我在父级div中有一个下拉菜单，该菜单具有固定的height并带有overflow: auto。我希望菜单在打开时可以扩展到该父对象的边缘。此刻，它增加了父级的高度。

请参见代码笔中的this reduced test case或此处的代码：

HTML

<div class="parent">
  <div class="dropdown">
    <button id="btn" class="btn" type="button">Click me</button>
    <div id="menu" class="menu">I should stick out of the parent, but instead I make the parent scroll</div>
  </div>
</div>

SCSS

.parent {
  height: 3rem;
  padding: 0.25rem;
  background-color: #f5f5f5;
  overflow: auto;
  text-align: center
}
.btn {
  font-size: 1.2rem;
}
.dropdown {
  display: inline-block;
  position: relative;
}
.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #eee;
  padding: 0.5rem;
  &.show {
    display: block;
  }
}

（JS只需在下拉菜单上切换show类，就不相关了。）

我尝试将下拉列表包装在另一个div中，并将溢出的几乎所有值以及人类已知的父对象放在上面，但没有运气。

我真的很想避免将菜单移到父菜单之外，并使用JS对其进行定位；当然，有一个CSS解决方案（我希望！）

有人有任何线索吗？

*更新后，我需要在常规文档流中存在该下拉列表，因为在我的实际应用程序中，在父级div中可以有很多这样的下拉列表。

Answer 1

这是您可以做的一点小技巧。不确定这样做是否正确，但是可以。

您要记住的一件事是，如果滚动，菜单将不会移动，因此您必须实现代码以侦听文档上的滚动事件，然后隐藏菜单或相应地移动它。

document.getElementById('btn').onclick = function openMenu() {

  var btn = document.getElementById('btn');
  
  var top = btn.offsetTop;
  var left = btn.offsetLeft;
  var height = btn.offsetHeight;
  
  
  var menu = document.getElementById('menu');
  menu.style.top = top + height +'px';
  menu.style.left = left + 'px';
  
  menu.classList.toggle('show');
};

.parent {
  height: 3rem;
  padding: 0.25rem;
  background-color: #f5f5f5;
  overflow: auto;
}

.btn {
  font-size: 1.2rem;
}

.dropdown {
  display: inline-block;
}

.menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100px;
  background-color: white;
  border: 1px solid #eee;
  padding: 0.5rem;
}
.menu.show {
  display: block;
}

<div class="parent">
  <span>Button must remain in document flow to coexist with other elements in the parent.</span>
  <div class="dropdown">
    <button id="btn" class="btn" type="button">Click me</button>
    <div id="menu" class="menu">I should stick out of the parent, but instead I make the parent scroll.</div>
  </div>
</div>

如何将这个下拉列表绝对定位在溢出滚动父级中？

1 个答案: