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>

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

2 个答案: