css - 如何使 Bootstrap 下拉列表始终位于顶部

Question

但是，我们使用的是 Bootstrap 3 Dropdown，当页面宽度不够大时容器 div 显示水平滚动条时看起来像这样。请注意，它不是浏览器窗口的滚动条。滚动条像下面这样剪辑下拉列表:

我检查了 dropdown-menu，它与作为下拉菜单的 ul 元素相关联，我觉得它很好:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 15px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #999999;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

后来我检查了容器 div 是否定义了任何 z-index 但我找不到任何东西。但它有一个名为 table-responsive 的类，它看起来像这样:

@media screen and (max-width: 1600px)
.table-responsive {
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}

Answer 1

我找到了答案。首先，将 btn-group 的 position css 规则从 relative 更改为 inherit。

$("#dropdownMenu").on("show.bs.dropdown", function () {
    // For difference between offset and position: http://stackoverflow.com/a/3202038/44852
    var dropdownButtonPosition = $(this).position();
    var dropdownButtonOffset = $(this).offset();
    var dropdownButtonHeight = $(this).height();
    var dropdownMenu = $(this).find(".dropdown-menu:first");
    var dropdownMenuHeight = dropdownMenu.height();
    var scrollToTop = $(document).scrollTop();

    // It seems there are some numbers that don't get included so I am using some tolerance for
    // more accurate result.
    var heightTolerance = 17;

    // I figured that window.innerHeight works more accurate on Chrome
    // but it is not available on Internet Explorer. So I am using $(window).height() 
    // method where window.innerHeight is not available.
    var visibleWindowHeight = window.innerHeight || $(window).height();

    var totalHeightDropdownOccupies = dropdownMenuHeight +
        dropdownButtonOffset.top + dropdownButtonHeight + heightTolerance - scrollToTop;

    // If there is enough height for dropdown to fully appear, then show it under the dropdown button,
    // otherwise show it above dropdown button.
    var dropdownMenuTopLocation = totalHeightDropdownOccupies < visibleWindowHeight
        ? dropdownButtonPosition.top + dropdownButtonHeight
        : dropdownButtonPosition.top - dropdownMenuHeight - dropdownButtonHeight + heightTolerance;

    dropdownMenu.css("left", dropdownButtonPosition.left)
        .css("top", dropdownMenuTopLocation);
});