Bootstrap 下拉菜单被容器裁剪并溢出：auto

Question

我的应用右侧有一个垂直固定侧边栏。它包含一个用户头像列表，每个头像在单击时都会在左侧显示一张带有选项列表的卡片，其中显示了与该用户相关的一些信息和操作。这是通过为列表中的每个头像使用dropdown-menu 和position: absolute; 来完成的。

最初，那个侧边栏只有几个元素，所以我什至没有考虑溢出。但是，现在我需要它能够包含用户想要的尽可能多的元素，所以如果内容溢出侧边栏，我需要滚动内部列表。

我尝试在侧边栏或内部列表中设置overflow-y: auto;，但在这两种情况下，都会导致下拉菜单被带有overflow: auto; 的容器剪切。

这是最相关的代码。下面我还附上了一个代码 sn-p 和一个完整的例子，展示了上述行为（全页运行，由于某种原因，下拉菜单没有在嵌入模式下触发）。

<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">...</li>
    <li class="fav dropdown">...</li>
    ...

  </ul>
</aside>

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 1px solid #d6d6d6;
}

.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: auto; /*** This is what I need ***/
}

.fav-bar .fav-list .fav .fav-card {
  position: absolute;
  top: 0;
  right: 65px; /* This would normally be 71px */
  border: 1px solid black;
}

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-left: 1px solid #d6d6d6;
  background-color: #e5e5e5;
}

.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: auto; /*** This is what I need ***/
}

.fav-bar .fav-list .fav {
  position: relative;
  margin-bottom: 5px;
}

.fav-bar .fav-list .fav img {
  border-radius: 50%;
}

.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: absolute;
  top: 0;
  right: 65px; /* This would normally be 71px */
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
  </ul>
</aside>

正如您在 CSS cmets 中看到的那样，我尝试将 .fav-list 设置为 overflow: auto;（我也尝试在 .fav-bar 上执行此操作），但这会使下拉菜单剪辑到容器的边界。另外，我修改了下拉菜单的位置，以便在触发时可以看到其中的一部分。

所以我的问题是，有什么方法可以实现我需要的行为吗？

我已经在谷歌上搜索了几个小时，但找不到任何有用的东西。到目前为止，我发现的“最佳”解决方案（我还没有尝试过）是使用带有 data-container="body" 的 Bootstrap 弹出窗口而不是下拉菜单，但我真的希望尽可能少地修改我的标记，因为这些卡片是相当复杂，这意味着 CSS 和 JS 都会发生重大变化。

就是这样。您知道我可以尝试在保持下拉列表可见的同时使列表滚动的任何解决方案吗？

Answer 1

您无法单独使用 CSS 实现您想要做的事情。如果您将<ul class="fav-list"> 的overflow-y 设置为scroll 并将overflow-x 设置为visible，那么您会注意到dropdown 菜单会被剪裁，尽管您可以上下滚动查看所有<li>的。 dropdown 菜单不会被剪裁的唯一方法是将<ul class="fav-list"> 的overflow 设置为visible，但是您无法上下滚动以查看所有<li>。

你有两个选择，要么你可以重新构建你的 HTML 然后重新设置它的样式，或者你可以使用一个小的 jQuery。 jQuery 解决方案不是最干净的解决方案，但如果您坚持使用当前的 HTML 结构，那么它会起作用。一旦单击<li>，我使用的jQuery函数将<ul class="fav-list">的overflow属性更改为visible，从而使dropdown菜单可见，但您将无法上下滚动到在dropdown 菜单打开时查看<li> 的其余部分。接下来，一旦您单击除<li> 之外的任何其他元素，<ul class="fav-list"> 的overflow-y 属性将更改为scroll，以便您可以上下滚动查看<li> 的其余部分的。

这是一个演示（以整页形式查看）：

$( document ).ready(function() {
  $( ".dropdown" ).click(function() {
    $(".fav-list").css("overflow","visible");
});

$(document).mouseup(function (e)
{
    var container = $(".dropdown");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".fav-list").css("overflow-y","scroll");
    }
});
});

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-left: 1px solid #d6d6d6;
  background-color: #e5e5e5;
}

.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: scroll
}

.fav-bar .fav-list .fav {
  position: relative;
  margin-bottom: 5px;
}

.fav-bar .fav-list .fav img {
  border-radius: 50%;
}

.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: absolute;
  top: 0;
  right: 65px; /* This would normally be 71px */
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
        <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
            
            <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
                
                <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
        <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
            <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
                
                    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
            <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
  </ul>
</aside>

另一种解决方案：

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-left: 1px solid #d6d6d6;
  background-color: #e5e5e5;
}
.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: scroll;
  /*** This is what I need ***/
}
.fav-bar .fav-list .fav {
  position: relative;
  margin-bottom: 5px;
}
.fav-bar .fav-list .fav img {
  border-radius: 50%;
}
.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: absolute;
  top: 0;
  right: 65px;
  /* This would normally be 71px */
  border: 1px solid black;
}
.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: relative;
  top: 0px;
  right: 0px;
  border: 1px solid black;
  float: none;
  vertical-align: middle;
}
.open>.dropdown-menu {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />


<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

  </ul>
</aside>