如何控制下拉框高度,使其在父容器之外不撑开高度?


我想写一个超出最大高度显示滚动条,但是下拉框需要展示到外层,现在设置了以后,下拉框会撑开外层元素的高度

有什么方法可以使得下拉框展示到外层呢

阅读 518
avatarAI BotBETA

要使下拉框超出容器高度并显示滚动条,同时不撑开容器,你可以使用 CSS 的 overflow 属性。以下是一种可能的实现方法:

  1. 设置容器的 overflow 属性为 hidden:这将确保超出容器的内容被隐藏。
  2. 设置下拉框的 overflow 属性为 autoscroll:这将使下拉框在需要时显示滚动条。
  3. 调整下拉框的高度:你可以使用 height 属性来设置下拉框的高度。如果你想要下拉框的高度超过容器,可以设置一个较大的值。

以下是一个示例的 CSS 代码:

.container {
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.dropdown {
  overflow: auto; /* 显示滚动条 */
  height: 200px; /* 设置下拉框的高度 */
}

请注意,这种方法将使下拉框的高度超过容器,并显示滚动条。但是,由于容器的 overflow 属性设置为 hidden,下拉框不会撑开容器的高度。如果你希望下拉框能够撑开容器,可以考虑使用其他布局方法或调整 CSS 样式。

4 个回答
  1. 如果用的是主流的 UI 库,弹框类的组件通常都会提供指定元素挂载到哪个父容器下的配置,比如 antdgetConainer
    image.png
  2. 自己开发的话

    image.png

综上,如果不是自己练手的话,最好用现成的组件库,省时省力

这里是一个demo,可以参考一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
        }
    </style>
</head>
<body>
    <div
        style="
            overflow: auto;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        "
    >
        container
        <input type="text" style="position: absolute; margin: 50px 0;">
        <div style="
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            background-color: aqua;
            position: absolute;
            top: 70px;
            left: 73px;
        ">popup</div>
    </div>
</body>
</html>

image.png

可以参考 element-ui, 下拉选项列表元素是在 body 层后追加的子元素, 选项列表设置 absolute 定位飘起来, 就不会占用当前层级容器的宽高了

你可以试下这个插件 easyest-dropdown(最简单的下拉插件)

代码如下:

<head>
  <!--If you don't use the css that comes with easyest-dropdown, then you don't need to import it-->
  <!--<link rel="stylesheet" href="./easyest-dropdown.css">-->
  <script src="./easyest-dropdown.js"></script>
</head>

<body>
    <button type="button" class="btn btn-primary" id="referenceEl">Show custom dropdown</button>
    
    <ul id="dropdownEl" class="my-custom-dropdown easyest-dropdown-transition">
      <li>Html</li>
      <li>Javascript</li>
      <li>Css</li>
      <li>Vue <small>(渐进式JavaScript框架)</small></li>
      <li>React <small>(构建Web和原生交互界面的库)</small></li>
      <li>Angular <small>(一个应用设计框架与开发平台)</small></li>
    </ul>
    <script>
      var referenceEl = document.getElementById('referenceEl');
      var dropdownEl = document.getElementById('dropdownEl');
      var isShow = false;
      referenceEl.addEventListener('click', function () {
        if (isShow) {
          dropdownEl.style.display = 'none';
          isShow = false;
          return;
        }
        var dropdownPosition = easyestDropdown.getDropdownDirection(referenceEl, dropdownEl, 'bottom', true);
        console.log('dropdownPosition', dropdownPosition);
        dropdownEl.style.left = dropdownPosition.right == null ? (dropdownPosition.left + 'px') : 'auto';
        dropdownEl.style.right = dropdownPosition.right != null ? (dropdownPosition.right + 'px') : '';
        dropdownEl.style.top = dropdownPosition.bottom == null ? (dropdownPosition.top + 'px') : 'auto';
        dropdownEl.style.bottom = dropdownPosition.bottom != null ? (dropdownPosition.bottom + 'px') : '';
        dropdownEl.style.display = 'block';
        var classNameArr = dropdownEl.className.split(' ');
        var placementClassName = classNameArr.find(function (className) {
          return className.startsWith('easyest-placement-');
        });
        if (placementClassName) {
          dropdownEl.classList.remove(placementClassName);
        }
        dropdownEl.classList.add('easyest-placement-' + easyestDropdown.camelCase2KebabCase(dropdownPosition.direction));
        isShow = true;
      }, false);
    </script>
</body>

最后计算位置定位了,其他方法都不太行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏