html - Bootstrap 下拉菜单被溢出的容器截断 :auto

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

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

我尝试在侧边栏或内部列表上设置 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 弹出窗口而不是下拉菜单，但我真的更愿意修改我的标记越少越好，因为这些卡片非常复杂，这意味着 CSS 和 JS 都会发生一些重大变化。

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

最佳答案

您无法单独使用 CSS 实现您想要实现的目标。如果设置 overflow-y的 <ul class="fav-list">至 scroll它是 overflow-x至 visible然后你会注意到 dropdown尽管您可以上下滚动以查看所有 <li>，但菜单会被剪掉的。 dropdown 的唯一使用方式菜单不会被剪裁正在设置 overflow的 <ul class="fav-list">至 visible但是您无法上下滚动查看所有 <li>的。

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

关于html - Bootstrap 下拉菜单被溢出的容器截断 :auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26704348/

html - Bootstrap 下拉菜单被溢出的容器截断 :auto

上一篇：html - 自动化 HTML 创建

下一篇：css - 高库存 : Change color of date input box border if active