如何使此下拉列表始終顯示在父div之外？

Question

我有一個非常具體的HTML / CSS和/或JS問題。 我在這個小提琴上創造了一個例子來說明這個問題。

我有一個可滾動的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

你為什么要使用桌子內的下拉？ 為什么不在桌子外面使用它？ 如果你堅持在表格中使用它，至少將它保存在第一個表格行或表格標題中......

更新你的小提琴

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