溢出的容器剪裁的引导程序下拉列表:auto

Question

我的应用程序右侧有一个垂直的固定侧边栏。它包含一个用户头像列表，每个头像在点击时都会显示一张卡片，卡片左侧有一个选项列表，其中显示了与该用户相关的一些信息和操作。这是通过对列表中的每个化身使用具有CCD_ 2的CCD_。

最初，侧边栏只有几个元素，所以我甚至没有考虑溢出。然而，现在我需要它能够包含用户想要的任意多的元素，所以如果内容溢出侧边栏，我需要内部列表来滚动。

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

以下是最相关的代码。下面我还附上了一个代码片段，其中有一个完整的示例显示了所述行为（以全页面运行，由于某种原因，在嵌入模式下不会触发下拉菜单）。

<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注释中看到的那样，我尝试将.fav-list设置为overflow: auto;（我也尝试在.fav-bar上进行设置），但这会使下拉列表剪切到容器的边界。此外，我修改了下拉菜单的位置，以便在触发时可以看到其中的一部分。

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

我已经在谷歌上搜索了几个小时，但找不到任何有效的东西。到目前为止，我发现的"最好"的解决方案（我还没有尝试）是在data-container="body"中使用Bootstrap popovers，而不是下拉菜单，但我真的更喜欢尽可能少地修改我的标记，因为这些卡非常复杂，这意味着CSS和JS都会有一些大的变化。

就是这样。你知道有什么解决方案吗？我可以试着让列表滚动，同时保持下拉列表可见？

Answer 1

您无法单独使用CSS实现您想要实现的功能。如果您将dropdown-menu0的overflow-y设置为scroll，将overflow-x设置为visible，则您会注意到dropdown菜单被剪切，尽管您可以上下滚动查看所有的<li>。dropdown菜单不被剪切的唯一方法是将<ul class="fav-list">的overflow设置为visible，但您不能上下滚动查看所有position: absolute;0的。

您有两种选择，一种是重组HTML，然后对其进行重新设计，另一种是使用一点jQuery。jQuery解决方案不是最干净的解决方案，但如果您坚持使用当前的HTML结构，那么它就会起作用。我使用的jQuery函数在单击<li>后将<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>