我怎樣才能讓這個下拉菜單總是顯示超出父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>