html - 绝对定位元素内部溢出 :auto parent

Question

我们有一个 div，它有一个 max-height 属性。因为我们希望内容可以滚动，所以我们在那个 div 中有 overflow:auto。

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

这里是情况的复制:https://jsfiddle.net/broncha/h1pa0tex/

Answer 1

快速回答是你不能!(如果您使用 overflow:auto，那么 container 中的所有内容都将是可滚动的。)

1. 如果你没有 overflow 它会起作用:

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

       <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>

2. 如果你想要的正是你所追求的，那么你必须做 position: fixed 并使用 js 来调整滚动:

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

       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;
       }

       <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>

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