如何使此下拉列表始终显示在父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>