我怎样才能让这个下拉菜单总是显示超出父div？

Question

我有一个非常具体的HTML/CSS和/或JS问题。我在this fiddle here上创建了一个示例来显示问题。

我有一个滚动的DIV这是父表：

<div style="overflow-y: auto; max-height: 300px;"> 
    <table style="width: 100%;"> 

...和我的表行的一个包含一个下拉菜单按钮：

<td> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 

我问题在于，当您单击按钮打开下拉菜单时，它会在可滚动区域内打开，因此如果不向下滚动，您将看不到下拉菜单。但是，我希望按钮在可滚动区域之外打开此下拉菜单。有没有办法做到这一点，使下拉是可见的，同时让UI仍然可缩放（意思是说，如果我调整窗口大小，它应该仍然显示按钮下的下拉菜单）？此外，我还要求将可滚动区域保持原样，这意味着，当内容太多时（这是设计要求），可滚动区域需要在那里。

Answer 1

我不认为有办法让你的孩子容器ul.dropdown-menu“忽略”其父的overflow: hidden ...如果你需要保持HTML结构，我认为唯一的选择是删除position: relative从.dropdown，并在按钮点击（使用按钮的位置）使用JavaScript设置.dropdown-menu的绝对顶部和左侧位置。

Answer 2

你为什么在表格内使用下拉菜单？为什么不在桌子外面使用它？如果你坚持使用它在表内，至少保持它在第一个表行或在表头...

更新您的fiddle

<div style="overflow-y: auto; max-height: 300px;"> 
    <table style="width: 100%;"> 
    <thead> 
     <tr> 
     <th style="text-align: left">Column 1</th> 
     <th style="text-align: left">Column 2</th> 
     <th style="text-align: left">Column 3</th> 
     <th>   <div class="dropdown"> 
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
       Dropdown 
       <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
       <li><a href="#">Action A</a></li> 
       <li><a href="#">Action B</a></li> 
       <li><a href="#">Action C</a></li> 
      </ul> 
      </div></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
     <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
     </tr> 
    </tbody> 
    </table> 
</div>