如何使此下拉列表始终显示在父 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 结构不变，我认为唯一的选择是从.dropdown 中删除position: relative 并在单击按钮时使用JavaScript 设置.dropdown-menu 的绝对顶部和左侧位置（fe 使用按钮的位置）。

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>