如何在隐藏溢出的固定高度容器中显示引导程序下拉菜单？答案

【问题标题】：How can I display a bootstrap dropdown in a fixed height container with overflow hidden?如何在隐藏溢出的固定高度容器中显示引导程序下拉菜单？
【发布时间】：2022-12-01 03:23:22
【问题描述】：

我创建了一个可扩展的工具栏，其中还包含一个引导程序下拉组件。我需要这个工具栏是一个固定的高度，所有超出工具栏大小的组件都被隐藏（弹出窗口除外）。因此，我已将 overflow:hidden 应用于该工具栏容器。但是，这会在展开时隐藏部分下拉菜单。有什么办法可以防止这个下拉菜单被剪掉吗？

我主要关心的是垂直裁剪，而不是水平裁剪。

我已尝试调整 z-index，如示例所示，但没有成功。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div style='position:absolute;top:12px;left:12px;width:300px;height:100px;border:solid 1px #888;overflow:hidden;'>
<div class="input-group" style='z-index:9998;'>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu dropdown-menu-right" style='z-index:9999;'>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>
<div>
Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. Expandable toolbar here. 
</div>

</div>
</body>
</html>

【问题讨论】：

固定高度+隐藏溢出=裁剪。也许重新考虑你为什么要隐藏溢出并询问这个问题。

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

尝试将 height 和 maxHeight 添加到下拉菜单

<div class="dropdown-menu dropdown-menu-right" style='z-index:9999; height: 50px; max-height: 100px; overflow: hidden;'>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div role="separator" class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

【讨论】：