Question

我们有一个具有max-height属性的div。由于我们希望内容可滚动，因此我们在该div中有overflow:auto。

但是现在我们需要在内容中有一个bootstrap下拉列表，当下拉列表被激活时，菜单会在容器div中呈现，它不会弹出它。我们如何解决这个问题？

以下是情况的复制：https://jsfiddle.net/broncha/h1pa0tex/

Answer 1

快速回答是你不能！（如果您使用overflow:auto，container内的所有内容都可以滚动。）

如果你没有overflow，那就有效：

＆＃13;

    .container{
      width: 200px;
      background: lightblue;
      padding: 15px;
    }

    .dropdown{
      border: 1px solid #000;
      position: relative;
    }

    .popup{
      position: absolute;
      top: 100%;
      left:0;
      background: red;
    }

＆＃13;

    <div class="container">
      <p>asasd asdasdas dasdasda</p>
      <p>asasd asdasdas dasdasda</p>
      <div class="dropdown">
        <p>Content</p>
        <div class="popup">
          <p>asasd asdasdas dasdasda</p>
          <p>asasd asdasdas dasdasda</p>
          <p>asasd asdasdas dasdasda</p>
        </div>
      </div>
    </div>

＆＃13;

如果你想要的是你想要的，那么你必须做position: fixed并使用js来调整滚动：

＆＃13;

    $(document).ready(function() {
      $('div.dropdown').each(function() {
        var dropDownTop = $(this).offset().top - $(window).scrollTop() + this.getBoundingClientRect().height;
        $(this).find('.popup').css('top', dropDownTop + "px");
        $(this).find('.popup').css('left', $(this).offset().left - 0.5 + "px");
        $(this).find('.popup').css('width', this.getBoundingClientRect().width - 1 + "px");
      });

    });

    $('div.container').scroll(function() {
      $('div.dropdown').each(function() {
        var dropDownTop = $(this).offset().top - $(window).scrollTop() + this.getBoundingClientRect().height;
        $(this).find('.popup').css('top', dropDownTop + "px");
        $(this).find('.popup').css('left', $(this).offset().left - 0.5 + "px");
        $(this).find('.popup').css('width', this.getBoundingClientRect().width - 1 + "px");

      });
    });

＆＃13;

    body {
      margin: 0;
      padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .container {
      width: 200px;
      max-height: 200px;
      overflow: auto;
      background: lightblue;
      padding: 15px;
    }
    .dropdown {
      border: 1px solid #000;
      position: relative;
    }
    .popup {
      position: fixed;
      background: red;
    }

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">
      <p>asasd asdasdas dasdasda</p>
      <p>asasd asdasdas dasdasda</p>
      <div class="dropdown">
        <p>Content</p>
        <div class="popup">
          <p>asasd asdasdas dasdasda</p>
          <p>asasd asdasdas dasdasda</p>
          <p>asasd asdasdas dasdasda</p>
        </div>
      </div>
      <p>asasd asdasdas bnvnbv jgjg khg nbvnbvn nbvn bv</p>
      <p>asasd asdasdas nbv mgv mbnv mnbv nbv</p>
      <p>asasd asdasdas kuyg k kjhb kjhb</p>
      <p>asasd asdasdas jkhg kjhg jhb khg</p>
      <p>asasd asdasdas kjhg jhg hjgyg</p>
      <p>asasd asdasdas hkjh jbjhb mv mhv</p>
    </div>

＆＃13;

让我知道您对此的反馈。谢谢！

Answer 2

我不太确定你在寻找什么，但是如果定位，你就可以突破＆＃39;主要容器。

HTML

<div class="container">
  <p>asasd asdasdas dasdasda</p>
  <p>asasd asdasdas dasdasda</p>
  <div class="dropdown">
    <p>Content</p>
    <div class="popup">
      <p>asasd asdasdas dasdasda</p>
      <p>asasd asdasdas dasdasda</p>
      <p>asasd asdasdas dasdasda</p>
    </div>
  </div>
<p>asasd asdasdas bnvnbv jgjg khg nbvnbvn nbvn bv</p>
  <p>asasd asdasdas nbv mgv mbnv mnbv nbv</p>
  <p>asasd asdasdas kuyg k kjhb kjhb</p>
  <p>asasd asdasdas jkhg kjhg jhb khg </p>
  <p>asasd asdasdas kjhg jhg hjgyg </p>
  <p>asasd asdasdas hkjh jbjhb mv mhv</p>
</div>

CSS

.container{
  width: 200px;
  max-height: 200px;
  overflow: auto;
  background: lightblue;
  padding: 15px;
}

.dropdown{
  border: 1px solid #000;
  position: relative;
}

.popup{
  position: fixed;
  background: red;
  z-index: 10;
  width: 184px;
}

Codepen link

Answer 3

我不知道如何解决你的特定问题，但我知道bootstrap有一个dropup类whitch显示内容不在它下面的按钮。如果这不会破坏您的设计方案，那么它就是一个简单的解决方案XD

溢出中的绝对定位元素：自动父级

3 个答案: